Dev Design Libraryshadcn/ui Drawer Components
Dev Design Library indexes 23 shadcn/ui drawer components from 10 open-source UI libraries, with the most coming from Watermelon UI, Shadcn Space, uselayouts, Spectrum UI and HextaUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Drawer components belong to the Overlays group.
Smooth DrawerKokonut UI · ReactCheckout bottom sheet on Vaul snap points, peeking at the total and dragging up for details.
Animated DrawerSpectrum UI · Reactcomponent for the Animated Drawer
Drawer 03 - Filters PanelShadcn Space · ReactLeft side filter drawer with category checkboxes, a price range slider, an in stock switch, a live result count, and…
Curve Draweruselayouts · ReactSide drawers whose inner edge starts as a bulge and morphs into a straight line as the panel settles.
SheetShadcn Dashboard · React
ChatGPT ActivityNotra · ReactThe search activity and sources side sheet, built on shadcn Sheet, Badge and Avatar.
Sheet 1Watermelon UI · React
Sheetglasscn · React
DrawerHextaUI · ReactA panel that slides in from any edge and follows your finger, with snap points, a working handle and nested drawers…
Sheetark-cn · ReactA shadcn-style sheet component built with Ark UI primitives.
Responsive ModalSpectrum UI · Reactcomponent for the Responsive Modal
Drawer 05 - Snap Points Order TrackingShadcn Space · ReactBottom drawer with peek, half, and full snap points showing delivery ETA, rider contact, a status timeline, and the…
Drawer Buttonsuselayouts · ReactTwo buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields…
Sheet 2Watermelon UI · React
SheetHextaUI · ReactA panel that slides in from any edge, with swipe-to-dismiss, scroll lock and stacked nesting.
Sheet 01 - Different DirectionsShadcn Space · ReactDrawer with different directions - top, right, bottom, left
Sheet 3Watermelon UI · React
Sheet 02 - Scrollable ContentShadcn Space · ReactDrawer with scrollable content
Sheet 4Watermelon UI · React
Sheet 04 - Filter PanelShadcn Space · ReactDrawer with products list, quantity controls, and sticky footer with total and checkout button
Sheet 5Watermelon UI · React
Sheet 6Watermelon UI · React
Sheet 7Watermelon UI · React