shadcn.io is an independent project built on shadcn/ui
Snap Points Drawer lists 148px for a quick preview, 355px for half the screen, and 100% for a full view, with Close. The copy says a drag settles on the nearest height.
Use it for a map or a player people peek at before opening fully. One fixed height can be a plain Drawer. In Solid, Ark UI stops at the heights you pass in.
Installation
Anatomy
Usage
<Drawer snapPoints={SNAP_POINTS}>
<DrawerTrigger asChild={props => <Button {...props()} variant="outline">Open with Snap Points</Button>} />
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Snap Points Drawer</DrawerTitle>
<DrawerDescription>
Drag to snap to 148px, 355px, or 100% of screen height.
</DrawerDescription>
</DrawerHeader>
<div class="flex flex-col gap-4 p-4">
<p class="text-muted-foreground text-sm">
This drawer has three snap points. Try dragging it to different
heights and it will snap to the nearest point.
</p>
<ul class="flex list-inside list-disc flex-col gap-2 text-sm">
<li>148px - Quick preview</li>
<li>355px - Half screen</li>
<li>100% - Full view</li>
</ul>
</div>
<DrawerFooter>
<DrawerClose asChild={props => <Button {...props()} variant="outline">Close</Button>} />
</DrawerFooter>
</DrawerContent>
</Drawer>FAQ
How are the snap points set?
snapPoints on Drawer takes ["148px", "355px", 1]. A string with a unit is a height; a number from 0 to 1 is a fraction of the screen, so 1 is the full height.
Which snap point does it open at?
The first one, 148px.
Set defaultSnapPoint on Drawer to open at another, or control it with snapPoint.
How do people move between snap points?
By dragging the bar or the panel. On release the drawer settles on a point. Swiping down from the lowest point closes it.
What happens to content that doesn't fit?
At a low snap point the rest of the drawer sits below the screen edge. Put the most useful part at the top, and let the body scroll once the drawer is fully open.
API Reference
Drawer
Sets snapPoints={SNAP_POINTS}, asChild and props. The rest is on the Drawer page.
Button
Sets props and variant="outline". The rest is on the Button page.
