LifeDS

Component

Drawer

Panel that slides in from an edge of the screen, built on vaul. Supports direction, nesting, non-modal mode and snap points.

directiontop · bottom · left · right
modalboolean — false keeps the page interactive
nestedstack a drawer inside another
snapPoints / activeSnapPointintermediate heights
Playground

Basic — bottom (default)

Direction — left

Nested drawers

Non-modal — page stays interactive

Snap points

Responsive — Dialog on desktop, Drawer on mobile

Tokens used

6 semantic tokens consumed by this component.

--popoverPopover
bg-popover
--popover-foregroundPopover Foreground
text-popover-foreground
--backgroundBackground
bg-background
--foregroundForeground
text-foreground
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder