Shadcn Drawer Scrollable Content

A basic drawer with scrollable content. Built by composing Button, Drawer. A free, open source shadcn drawer example you can install with npx shadcn@latest add @reui/c-drawer-1 and edit as your own code.

A basic drawer with scrollable content

For AI Agents

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

Best for: The default bottom panel, capped at 80vh, that a downward swipe dismisses

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 side panel docked to the right edge, closed with a sideways swipe: use the Drawer Right Side example
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-1.md

MCPget_example("c-drawer-1")

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

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Drawer Scrollable Content

About Shadcn Drawer Scrollable Content

What You Can Build With Shadcn Drawer Scrollable Content

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-1
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Drawer Examples

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
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 Scrollable Content?

Use it for the default bottom panel, capped at 80vh, that a downward swipe dismisses.

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 side panel docked to the right edge, closed with a sideways swipe, use the Drawer Right Side example. 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 Scrollable Content?

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

Is Shadcn Drawer Scrollable Content free to use?

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

Which components does Shadcn Drawer Scrollable Content 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.