Shadcn Drawer Top Side

A drawer that opens from the top side. Built by composing Button, Drawer. A free, open source shadcn drawer example you can install with npx shadcn@latest add @reui/c-drawer-4 and edit as your own code.

A drawer that opens from the top side

For AI Agents

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

Best for: A drawer that drops from the top edge, capped at 80vh, and closes with an upward swipe

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

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-4.md

MCPget_example("c-drawer-4")

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

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Drawer Top Side

About Shadcn Drawer Top Side

What You Can Build With Shadcn Drawer Top Side

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-4
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
All Sides Drawers opening from different sides

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 Top Side?

Use it for a drawer that drops from the top edge, capped at 80vh, and closes with an upward swipe.

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 Top Side?

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

Is Shadcn Drawer Top Side free to use?

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

Which components does Shadcn Drawer Top Side 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.