6 min read

React Drawer Component Examples

Drop-in React Drawer examples: right slide-in, controlled state, four sides, edit form, navigation drawer. Built on the native <dialog> with zero deps.

A drawer is the right surface for settings panels, navigation, edit forms, and any task that benefits from a side-anchored slide-in instead of a centered Dialog. The Drawer component in Drivn wraps the native HTML <dialog> element, so the browser handles modal stacking, focus trap, and Escape-to-close — the component file ships zero runtime UI dependencies and weighs around a hundred and fifty lines you own after install. Use it whenever the rest of the page should sit behind a backdrop while one focused task slides in from an edge.

This page collects the patterns that come up in shipped UIs. Each example is copy-paste ready and uses the same @/components/ui/drawer import path the Drivn CLI installs under, so the snippets compile the moment you run npx drivn add drawer. Drivn's Drawer uses dot notation — Drawer.Trigger opens, Drawer.Content renders the panel — and the side prop on Drawer.Content accepts left, right, top, or bottom. The Drawer.Header subcomponent takes title and description as string props, replacing the DrawerHeader plus DrawerTitle plus DrawerDescription scaffold you might be used to from other libraries.

If you want a centered modal instead of a side-anchored panel, reach for Dialog. For an anchored, non-modal floating panel, use Popover. The Drawer examples below stay focused on the slide-in pattern: a basic right drawer, a controlled-state drawer driven from outside the trigger, a drawer for every side, a drawer with an edit form and footer actions, and a navigation drawer for mobile menus.

Basic right-side drawer

The default Drawer renders a Trigger button that opens a panel sliding in from the right edge. Pass the title and description props on Drawer.Header and the component renders an <h2> styled with text-lg font-semibold plus a muted description line. The close button is rendered via Drawer.Close — drop it in the top-right corner and the registry source positions it absolutely with a hover state.

Because the Drawer source lives in your repo after install, swapping the trigger styling, panel max-width, or the close icon is a local edit. The minimum viable integration is a Trigger plus a Content with a side prop, a Header for the title row, and your body content as plain JSX. Outside-click closes the drawer because the component listens for clicks on the <dialog> backdrop, and Escape works through the native cancel event.

1 import { Drawer } from "@/components/ui/drawer"
2 import { Button } from "@/components/ui/button"
3 
4 export default function Page() {
5   return (
6     <Drawer>
7       <Drawer.Trigger>Edit profile</Drawer.Trigger>
8       <Drawer.Content side="right">
9         <Drawer.Close />
10         <Drawer.Header
11           title="Edit profile"
12           description="Make changes to your profile."
13         />
14         <div className="flex-1 p-6">
15           <p>Form content goes here.</p>
16         </div>
17         <Drawer.Footer>
18           <Button>Save</Button>
19         </Drawer.Footer>
20       </Drawer.Content>
21     </Drawer>
22   )
23 }

Controlled open state

For drawers that need to open from outside the trigger — a keyboard shortcut, a route parameter, a "notification arrived" toast — pass open and onOpenChange to the Drawer root. The component reconciles controlled and uncontrolled modes inside DrawerRoot: when open is undefined, internal useState runs; when defined, the prop wins and onOpenChange fires alongside any internal updates.

This pattern is also the right one for edit drawers where the panel must close only after an async save resolves. Keep the drawer open while the request is in flight, then call setOpen(false) from the action handler. The Drawer props reference lists every prop, and the controlled API matches every other Drivn compound — Dialog, Popover, Dropdown all accept the same open plus onOpenChange pair.

1 import { useState } from "react"
2 import { Drawer } from "@/components/ui/drawer"
3 import { Button } from "@/components/ui/button"
4 
5 export default function Page() {
6   const [open, setOpen] = useState(false)
7 
8   return (
9     <>
10       <Button onClick={() => setOpen(true)}>Open drawer</Button>
11       <Drawer open={open} onOpenChange={setOpen}>
12         <Drawer.Content side="right">
13           <Drawer.Close />
14           <Drawer.Header title="Settings" />
15           <div className="flex-1 p-6">
16             <p>Drawer body.</p>
17           </div>
18           <Drawer.Footer>
19             <Button onClick={() => setOpen(false)}>Done</Button>
20           </Drawer.Footer>
21         </Drawer.Content>
22       </Drawer>
23     </>
24   )
25 }

All four sides

The side prop on Drawer.Content accepts right (default), left, top, or bottom. Each value picks the right translate utility from the styles.sides map in the registry source — side drawers default to a 400 px max-width and full viewport height, top and bottom drawers default to 400 px height and full viewport width. The animation uses Tailwind 4's starting: and group-open: variants on translate, so the slide-in direction comes from CSS, not a JavaScript timer.

Use right for primary panels in left-to-right layouts, left for navigation drawers that pair with a sidebar, top for global announcements or filters above the page, and bottom for action sheets on touch surfaces. If you want a true gesture-driven bottom sheet with drag-to-dismiss, Drivn does not ship that — see Drivn vs shadcn Drawer for the comparison.

1 <Drawer>
2   <Drawer.Trigger>Right</Drawer.Trigger>
3   <Drawer.Content side="right">
4     <Drawer.Close />
5     <div className="p-6">Slides from right</div>
6   </Drawer.Content>
7 </Drawer>
8 
9 <Drawer>
10   <Drawer.Trigger>Left</Drawer.Trigger>
11   <Drawer.Content side="left">
12     <Drawer.Close />
13     <div className="p-6">Slides from left</div>
14   </Drawer.Content>
15 </Drawer>
16 
17 <Drawer>
18   <Drawer.Trigger>Top</Drawer.Trigger>
19   <Drawer.Content side="top">
20     <Drawer.Close />
21     <div className="p-6">Slides from top</div>
22   </Drawer.Content>
23 </Drawer>
24 
25 <Drawer>
26   <Drawer.Trigger>Bottom</Drawer.Trigger>
27   <Drawer.Content side="bottom">
28     <Drawer.Close />
29     <div className="p-6">Slides from bottom</div>
30   </Drawer.Content>
31 </Drawer>

Edit form with footer actions

Drawers are the natural surface for edit forms — rename a project, edit a profile, change notification preferences. Render Input and Label pairs inside Drawer.Content, wrap them in a scroll container with flex-1 overflow-y-auto, and pin the action row at the bottom with Drawer.Footer. Because the drawer uses the native <dialog> element, focus enters the panel automatically and Escape cancels.

Keep the form vertical, leave breathing room between fields, and place the primary action on the right of the footer. The Drivn Button variants — default for save, outline for cancel — give the footer the same styling rhythm you see across the app. For multi-step forms, drop a Stepper above the field block.

1 import { useState } from "react"
2 import { Drawer } from "@/components/ui/drawer"
3 import { Button } from "@/components/ui/button"
4 import { Input } from "@/components/ui/input"
5 import { Label } from "@/components/ui/label"
6 
7 export default function Page() {
8   const [open, setOpen] = useState(false)
9   const [name, setName] = useState("")
10 
11   const handleSave = async () => {
12     await fetch("/api/profile", {
13       method: "POST",
14       body: JSON.stringify({ name }),
15     })
16     setOpen(false)
17   }
18 
19   return (
20     <Drawer open={open} onOpenChange={setOpen}>
21       <Drawer.Trigger>Edit profile</Drawer.Trigger>
22       <Drawer.Content side="right">
23         <Drawer.Close />
24         <Drawer.Header
25           title="Edit profile"
26           description="Update your display name."
27         />
28         <div className="flex-1 overflow-y-auto p-6">
29           <div className="flex flex-col gap-2">
30             <Label htmlFor="name">Display name</Label>
31             <Input
32               id="name"
33               value={name}
34               onChange={(e) => setName(e.target.value)}
35             />
36           </div>
37         </div>
38         <Drawer.Footer>
39           <Button variant="outline" onClick={() => setOpen(false)}>
40             Cancel
41           </Button>
42           <Button onClick={handleSave}>Save</Button>
43         </Drawer.Footer>
44       </Drawer.Content>
45     </Drawer>
46   )
47 }

Navigation drawer (mobile menu)

A left-side Drawer is the standard pattern for a mobile menu — the trigger button (a hamburger icon) sits in the header, tapping it slides the navigation in from the left, and tapping any link or the backdrop closes it. Drivn's Drawer fits this shape directly: pass side="left", render a vertical list of links inside the body, and close the drawer programmatically when the user picks a destination.

Keep the link list spaced enough to thumb comfortably — at least 44 px tap targets — and group secondary actions (theme toggle, logout) at the bottom inside Drawer.Footer. Pair the trigger with an Icon Button that switches between a hamburger and an X icon based on the open state. The example below shows the structure; close the drawer programmatically after the route changes by calling setOpen(false) from each link's onClick handler.

1 import { useState } from "react"
2 import Link from "next/link"
3 import { Menu } from "lucide-react"
4 import { Drawer } from "@/components/ui/drawer"
5 import { Button } from "@/components/ui/button"
6 
7 export default function MobileNav() {
8   const [open, setOpen] = useState(false)
9   const close = () => setOpen(false)
10 
11   return (
12     <Drawer open={open} onOpenChange={setOpen}>
13       <Drawer.Trigger>
14         <Menu className="w-5 h-5" />
15       </Drawer.Trigger>
16       <Drawer.Content side="left">
17         <Drawer.Close />
18         <Drawer.Header title="Menu" />
19         <nav className="flex-1 overflow-y-auto p-6">
20           <ul className="flex flex-col gap-1">
21             <li>
22               <Link href="/" onClick={close} className="block py-3">
23                 Home
24               </Link>
25             </li>
26             <li>
27               <Link href="/docs" onClick={close} className="block py-3">
28                 Docs
29               </Link>
30             </li>
31             <li>
32               <Link
33                 href="/templates"
34                 onClick={close}
35                 className="block py-3"
36               >
37                 Templates
38               </Link>
39             </li>
40           </ul>
41         </nav>
42         <Drawer.Footer>
43           <Button variant="outline" onClick={close}>
44             Close
45           </Button>
46         </Drawer.Footer>
47       </Drawer.Content>
48     </Drawer>
49   )
50 }

Get started

Install Drivn in one command

Copy the source into your project and own every line. Zero runtime dependencies, pure React + Tailwind.

npx drivn@latest create

Requires Node 18+. Works with npm, pnpm, and yarn.

Enjoying Drivn?

Star the repo on GitHub to follow new component releases.

Star →

Frequently asked questions

Dialog renders as a centered modal panel anchored in the middle of the viewport. Drawer slides in from one of four edges and is a better fit for navigation menus, edit forms, and settings panels. Both trap focus and dismiss on Escape, and both are built on the native <dialog> element — they share the same primitive and the same controlled API. Reach for Drawer when the task lives at the edge of the screen; reach for Dialog when it should sit dead-center.

Switch to controlled mode by passing open and onOpenChange to the Drawer root, then call setOpen(false) from any handler — a Save button, a form submit, an async resolver. The built-in close button does the same thing internally, so a custom close action is just an additional caller of the same setter. The pattern matches every other Drivn compound including Dialog and Popover.

No — Drivn Drawer is a side-anchored slide-in, not a gesture-driven bottom sheet. It dismisses on outside-click, Escape, or the built-in close button. If drag-to-dismiss is critical to your UX (iOS-style bottom sheets with snap points), the shadcn/ui Drawer wraps Vaul and is the right pick for that surface. See Drivn vs shadcn Drawer for a full comparison.

Yes — pass side="bottom" to Drawer.Content and the panel slides up from the bottom edge with a default height of 400 px and full viewport width. The animation uses the same translate-y plus starting: variant pattern that powers the side variants, so the timing and easing match. For a true gesture-driven bottom sheet with drag-to-dismiss, Drivn does not ship that — use Vaul through shadcn/ui for that specific surface.

The Drawer file starts with "use client" because it manages state with useState and listens for events on the <dialog> element. You can import it from a Server Component, but it renders on the client. Next.js draws the client boundary correctly based on the use client directive at the top of the file — no manual configuration needed in your layout or page. Render the trigger and content inside any server-rendered page and the drawer hydrates on the client automatically.