Drawer

A panel that slides in from the edge of the screen, typically used on smaller viewports.

$bunx shadcn@latest add @nx-ui/drawer
Registry item
Installs withutils

Basic

By default the drawer slides up from the bottom edge and dismisses on a downward swipe.

Direction

swipeDirection sets which edge the drawer slides from and which swipe gesture dismisses it.

Swipe handle & snap points

showSwipeHandle renders a drag grip, and snapPoints lets the drawer rest at partial heights before fully opening.

Composition: log an intake

A controlled drawer driving a form, with a non-modal filter drawer alongside it. Closing is disabled while the submission is pending.

API reference

Exported parts and their props, extracted from the component source.