Live Playground
Open the panel to test the controlled API, side-based panel movement, and built-in overlay close behavior.
Open the drawer to inspect the overlay blur, side-based slide motion, and the staggered header and body reveal.
Install And Iterate
Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.
Install
Build with v0
Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.
Usage
Control visibility from local state and pass your own title, description, and body content into the same shared shell.
tsx
import { useState } from "react";
import { Drawer } from "@/components/ui/drawer";
export function WorkspaceDrawer() {
const [open, setOpen] = useState(false);
return (
<>
<button
className="inline-flex items-center justify-center rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground"
onClick={() => setOpen(true)}
type="button"
>
Open drawer
</button>
<Drawer
description="Review the latest changes before pushing the next release live."
onClose={() => setOpen(false)}
open={open}
title="Workspace details"
>
<div className="space-y-3">
<p className="text-sm text-muted-foreground">
This drawer keeps surrounding context visible while you review a narrow task flow.
</p>
</div>
</Drawer>
</>
);
}API Details
Each item below covers the documented props and the behavior that matters during implementation.