Porthole
Modal. Centred dialog or bottom sheet. Focus stays inside, Escape closes, motion respects reduced-motion settings.
- Component
- Modal
- Pattern
- APG Dialog (Modal)
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Porthole · React + TailwindFull width
| Keys | What happens |
|---|---|
| EnterorSpace | On the trigger button: open the modal. |
| TaborShift + Tab | Move between the modal's buttons. Focus wraps and never leaves the modal. |
| Escape | Close the modal and return focus to the trigger button. |
| EnterorSpace | On a button inside: run its action and close. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/modal.json"Run it in your project root. It writes components/modal.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).