ns-ui
Side drawer hung on a counterweight like a sash window: a thin track on the drawer's leading edge carries a weight pill that travels opposite the drag at -0.6x, and wherever it sits at release — before or past the tick — decides whether a spring pulls the drawer shut or bottoms the weight out and holds it open.
Use when a side drawer the user drags, where the release position should decide the outcome through a visible counterweight rather than a hidden velocity threshold; pick dialog-emerge instead when the overlay is a centered modal opened by a control, or swipe-row-detent when the drag belongs to a list row rather than to a panel.
Install
npx shadcn add https://design.helpmarq.comns-ui / drawer-counterweight — drag the rail, watch the weight decide
128 items · sorted by relevance
Item 1
$29.00
Item 2
$35.00
Item 3
$41.00
Item 4
$47.00
Item 5
$53.00
Item 6
$59.00
Item 7
$65.00
Item 8
$71.00
Item 9
$77.00
Grab the thin rail on the drawer's left edge — the weight travels opposite your drag at 0.6x. Release above the tick and it pulls the drawer shut; past it, the weight bottoms out and the drawer holds itself open. The trigger and Escape work the same spring without a drag.
| Prop | Type | Default | Description |
|---|---|---|---|
| open? | boolean | — | controlled open state; omit for uncontrolled |
| defaultOpen? | boolean | — | — |
| onOpenChange? | (open: boolean) => void | — | — |
| trigger? | ReactNode | — | label rendered on the trigger button |
| title | string | — | — |
| description? | ReactNode | — | — |
| children? | ReactNode | — | drawer body content |
| className? | string | — | — |