Preview

Installation

npx drivn add drawer

Usage

1 import { Drawer } from "@/components/ui/drawer"
2 import { Button } from "@/components/ui/button"
3 import { Input } from "@/components/ui/input"
4 import { Label } from "@/components/ui/label"
5 
6 export default function Page() {
7   return (
8     <Drawer>
9       <Drawer.Trigger>Edit Profile</Drawer.Trigger>
10       <Drawer.Content>
11         <Drawer.Close />
12         <Drawer.Header
13           title="Edit Profile"
14           description="Make changes to your profile."
15         />
16         <div className="flex-1 overflow-y-auto p-6">
17           <div className="flex flex-col gap-4">
18             <div className="flex flex-col gap-2">
19               <Label htmlFor="name">Name</Label>
20               <Input id="name" placeholder="John Doe" />
21             </div>
22             <div className="flex flex-col gap-2">
23               <Label htmlFor="email">Email</Label>
24               <Input id="email" placeholder="john@example.com" />
25             </div>
26           </div>
27         </div>
28         <Drawer.Footer>
29           <Button>Save Changes</Button>
30         </Drawer.Footer>
31       </Drawer.Content>
32     </Drawer>
33   )
34 }

Sides

With Header & Footer

API Reference

Drawer

Prop	Type	Default	Description
`open`	boolean	—	Controlled open state. Omit for uncontrolled mode.
`onOpenChange`	(open: boolean) => void	—	Callback fired when the drawer open state changes
`children`	ReactNode	—	Drawer sub-components (Trigger, Content, Close, Header, Footer)

Drawer.Content

Prop	Type	Default	Description
`side`	'left' \| 'right' \| 'top' \| 'bottom'	'right'	Which edge the drawer slides in from
`className`	string	—	Additional CSS classes for the drawer panel
`children`	ReactNode	—	Content rendered inside the drawer

Drawer.Header

Prop	Type	Default	Description
`title`	string	—	Heading text displayed in the header
`description`	string	—	Optional description text below the title
`className`	string	—	Additional CSS classes for the header

Drawer.Footer

Prop	Type	Default	Description
`children`	ReactNode	—	Footer content, typically action buttons
`className`	string	—	Additional CSS classes for the footer

1	import { Drawer } from "@/components/ui/drawer"
2	import { Button } from "@/components/ui/button"
3	import { Input } from "@/components/ui/input"
4	import { Label } from "@/components/ui/label"
5
6	export default function Page() {
7	return (
8	<Drawer>
9	<Drawer.Trigger>Edit Profile</Drawer.Trigger>
10	<Drawer.Content>
11	<Drawer.Close />
12	<Drawer.Header
13	title="Edit Profile"
14	description="Make changes to your profile."
15	/>
16	<div className="flex-1 overflow-y-auto p-6">
17	<div className="flex flex-col gap-4">
18	<div className="flex flex-col gap-2">
19	<Label htmlFor="name">Name</Label>
20	<Input id="name" placeholder="John Doe" />
21	</div>
22	<div className="flex flex-col gap-2">
23	<Label htmlFor="email">Email</Label>
24	<Input id="email" placeholder="john@example.com" />
25	</div>
26	</div>
27	</div>
28	<Drawer.Footer>
29	<Button>Save Changes</Button>
30	</Drawer.Footer>
31	</Drawer.Content>
32	</Drawer>
33	)
34	}