A window over the page for one focused task, with the page behind made inert. On Mobile it is a bottom sheet.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/dialogPlayground
Content
Long content
Submitting
State
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/dialog
Accessibility
- A native modal dialog, labelled by the title and described by the description.
- Focus starts on the first field or the primary action.
- The close button has the label Close.
Motion
- Opens in 200 ms from 0.96 and 8 px below, with the scrim fading in parallel.
- Closes to 0.98 in 150 ms.
- Esc while submitting gives a small pulse.
- The Mobile sheet rises on a 0.2 spring, follows the finger and closes past 30%.
- With reduced motion, it fades in. There is no pulse.
Responsive behavior
- 440 wide and centred on Web.
- 390 reference on Mobile with a grabber and stacked actions, primary first.
Performance
- A native dialog opened with showModal, so the browser makes the page inert and holds focus.
- Scrim and panel mount only while open, and one shared counter unlocks page scroll when the last modal closes.
- The scrim's 4 px backdrop blur is the main paint cost. Sheet and Drawer skip it.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Dialog and DialogFooter from @/components/fetaui/dialog after installing it.
- Pass trigger, or control it with open and onOpenChange. Put actions in a DialogFooter, primary last.
- layout sticky or scroll pins the header and scrolls the card. submitting locks close, Esc and the scrim, so set the primary's status to loading too.
- On Mobile it becomes a bottom sheet with no extra props. The publish in the demo is a timer. Composes Modal and IconButton.
Related
Alert DialogComponentA modal that interrupts with something important and waits for an answer.SheetComponentContent that complements the page, sliding in from an edge and floating 8 px in from it.DrawerComponentA panel from the edge of the screen: a floating side panel on Web and a bottom sheet on Mobile.Bottom SheetComponentA panel that slides up for one focused task. Mobile docks with a grabber, and Web floats at 480.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.