A panel from the edge of the screen: a floating side panel on Web and a bottom sheet on Mobile.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/drawerPlayground
States
Sides
State
Side
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/drawer
Sides
Right for details, left for navigation, bottom for short tasks. Mobile is always bottom.
State
Accessibility
- A native modal dialog labelled by the title.
- Focus moves in and returns to the trigger.
- The grabber is decorative: keyboard users close with Esc or the close button.
Motion
- Slides in on a 0.2 spring over 300 ms and out in 220 ms, with the scrim in parallel.
- A bottom sheet follows the finger or the pointer, and closes past 30% or on a flick.
- With reduced motion, it fades in place.
Responsive behavior
- Right and Left are 380 wide with an 8 px inset on Web.
- Bottom is the Mobile sheet on every platform: 390 wide, docked to the bottom edge, with a grabber, Mobile sizes and stacked actions.
Performance
- Shares Modal with Dialog: a native dialog that mounts only while open.
- On Mobile a drag starts only from the grabber, so scrolling inside the card stays native.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Drawer from @/components/fetaui/drawer after installing it.
- side is right, left or bottom on Web, and Mobile is always bottom. title and children are required.
- saving locks close, Esc and the scrim. scrollable scrolls the card and keeps footer in place.
- The save in the demo is a timer. Composes Modal and IconButton.
Related
SheetComponentContent that complements the page, sliding in from an edge and floating 8 px in from it.Bottom SheetComponentA panel that slides up for one focused task. Mobile docks with a grabber, and Web floats at 480.Smooth DrawerComponentA drawer with heights to drag between: Peek shows the total and Pay, Expanded shows everything.DialogComponentA window over the page for one focused task, with the page behind made inert. On Mobile it is a bottom sheet.SidebarComponentNav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.