Components
Loading preview...
A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.
npx shadcn@latest add https://21st.dev/r/coss.com/drawer"use client";
import { useState } from "react";
import {
Button,
Drawer,
DrawerDescription,
DrawerHeader,
DrawerPanel,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
export default function Particle() {
const snapPoints = ["300px", 1] as const;
const [snapPoint, setSnapPoint] = useState<
(typeof snapPoints)[number] | null
>(snapPoints[0]);
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<Drawer
onSnapPointChange={(point) =>
setSnapPoint(point as (typeof snapPoints)[number] | null)
}
position="bottom"
snapPoint={snapPoint}
snapPoints={[...snapPoints]}
snapToSequentialPoints
>
<DrawerTrigger render={<Button variant="outline" />}>
With snap points
</DrawerTrigger>
<DrawerPopup showBar>
<DrawerHeader>
<DrawerTitle>Snap Points</DrawerTitle>
<DrawerDescription>
Drag the drawer to snap between a compact peek and full-height view.
</DrawerDescription>
</DrawerHeader>
<DrawerPanel>
<div className="flex flex-col gap-2">
{Array.from({ length: 48 }, (_, i) => `box-${i}`).map((key) => (
<div
className="h-12 shrink-0 rounded-xl border bg-muted"
key={key}
/>
))}
</div>
</DrawerPanel>
</DrawerPopup>
</Drawer>
</div>
);
}