Shadcn Drawer All Sides

Drawers opening from different sides. Built by composing Button, Drawer. A free, open source shadcn drawer example you can install with npx shadcn@latest add @reui/c-drawer-5 and edit as your own code.

Drawers opening from different sides

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A row of 4 triggers, one drawer per edge, for comparing the directions side by side

When to use

Touch panels that slide in from a screen edge and close with a swipe
Mobile tasks with a scrolling body between a title and footer actions

When not to use

A desktop side panel opened by mouse or keyboard with no swipe gesture: use the Sheet component
A slide out mini bag with quantity steppers, subtotal and checkout: use the Shopping Cart blocks
A centered modal for a short form or a confirmation: use the Dialog component

Agent notes

Keep 1 entry of SIDES and pass its swipeDirection, or direction on radix, to Drawer; the demo mounts a drawer per edge
Set the edge with swipeDirection down, up, left or right on the base twin and direction bottom, top, left or right on radix
The base Drawer draws no grab handle unless you pass showSwipeHandle; the radix one draws it on every bottom drawer
The footer Submit Button has no handler and leaves the drawer open, unlike the DrawerClose Cancel beside it

Markdownhttps://reui.io/components/drawer/c-drawer-5.md

MCPget_example("c-drawer-5")

Installnpx shadcn@latest add @reui/c-drawer-5

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Drawer All Sides

About Shadcn Drawer All Sides

What You Can Build With Shadcn Drawer All Sides

Composes Button, Drawer, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-drawer-5
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Drawer Examples

Scrollable Content A basic drawer with scrollable content
Right Side A drawer that opens from the right side
Left Side A drawer that opens from the left side
Top Side A drawer that opens from the top side

Related Shadcn Component Categories

Dropdown Menu
Open-source shadcn dropdown menu components for action menus, profile menus, and toolbar menus.
Emoji Picker
Open-source shadcn emoji picker components for message composers, reactions, page icons, statuses, and custom team emoji.
Empty
Open-source shadcn empty state components for zero-data screens, first-run onboarding, and guided next steps.
Event Calendar
Open-source shadcn event calendar components with month, week, day and agenda views, and drag-and-drop scheduling.
Field
Open-source shadcn form field components for form composition, validated inputs, and helper text.
File Type
Open-source shadcn file type icon components for file extensions, export formats, and file browsers.

Frequently Asked Questions

When should I use Shadcn Drawer All Sides?

Use it for a row of 4 triggers, one drawer per edge, for comparing the directions side by side.

Shadcn Drawer as a whole fits:

Touch panels that slide in from a screen edge and close with a swipe
Mobile tasks with a scrolling body between a title and footer actions

For a desktop side panel opened by mouse or keyboard with no swipe gesture, use the Sheet component. For a slide out mini bag with quantity steppers, subtotal and checkout, use the Shopping Cart blocks. For a centered modal for a short form or a confirmation, use the Dialog component.

How do I install Shadcn Drawer All Sides?

Run npx shadcn@latest add @reui/c-drawer-5. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Drawer All Sides free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Drawer All Sides use?

It composes Button, Drawer. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.