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/drawerimport {
Button,
Drawer,
DrawerHeader,
DrawerPanel,
DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
export default function Particle() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<div className="flex flex-wrap gap-2">
<Drawer position="right">
<DrawerTrigger render={<Button variant="outline" />}>
Right
</DrawerTrigger>
<DrawerPopup variant="inset">
<DrawerHeader>
<DrawerTitle>Right</DrawerTitle>
</DrawerHeader>
<DrawerPanel>
<p className="text-muted-foreground text-sm">
Content from the right.
</p>
</DrawerPanel>
</DrawerPopup>
</Drawer>
<Drawer position="left">
<DrawerTrigger render={<Button variant="outline" />}>
Left
</DrawerTrigger>
<DrawerPopup variant="inset">
<DrawerHeader>
<DrawerTitle>Left</DrawerTitle>
</DrawerHeader>
<DrawerPanel>
<p className="text-muted-foreground text-sm">
Content from the left.
</p>
</DrawerPanel>
</DrawerPopup>
</Drawer>
<Drawer position="top">
<DrawerTrigger render={<Button variant="outline" />}>Top</DrawerTrigger>
<DrawerPopup variant="inset">
<DrawerHeader>
<DrawerTitle>Top</DrawerTitle>
</DrawerHeader>
<DrawerPanel>
<p className="text-muted-foreground text-sm">
Content from the top.
</p>
</DrawerPanel>
</DrawerPopup>
</Drawer>
<Drawer>
<DrawerTrigger render={<Button variant="outline" />}>
Bottom
</DrawerTrigger>
<DrawerPopup variant="inset">
<DrawerHeader>
<DrawerTitle>Bottom</DrawerTitle>
</DrawerHeader>
<DrawerPanel>
<p className="text-muted-foreground text-sm">
Content from the bottom.
</p>
</DrawerPanel>
</DrawerPopup>
</Drawer>
</div>
</div>
);
}