Shadcn Drawer

React drawer component for mobile slide-out panels and navigation menus. Built with TypeScript and Tailwind CSS for Next.js applications using Vaul library.

Drawer animations choppy?

Join our Discord community for help from other developers.

Ever tried to fit a mobile navigation menu into a tiny hamburger dropdown? Or watched users struggle to complete forms on small screens because your modal covers everything? Yeah, cramming desktop UI patterns into mobile doesn't work. This shadcn/ui drawer brings native app-style slide-out panels to your React applications.

Drawer showcase

Panels that slide naturally like native mobile apps:

Loading component...

"use client"import * as React from "react"import { Minus, Plus } from "lucide-react"import { Bar, BarChart, ResponsiveContainer } from "recharts"import { Button } from "@/components/ui/button"import {  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "@/components/ui/drawer"const data = [  { goal: 400 },  { goal: 300 },  { goal: 200 },  { goal: 300 },  { goal: 200 },  { goal: 278 },  { goal: 189 },  { goal: 239 },  { goal: 300 },  { goal: 200 },  { goal: 278 },  { goal: 189 },  { goal: 349 },]export default function DrawerDemo() {  const [goal, setGoal] = React.useState(350)  function onClick(adjustment: number) {    setGoal(Math.max(200, Math.min(400, goal + adjustment)))  }  return (    <Drawer>      <DrawerTrigger asChild>        <Button variant="outline">Open Drawer</Button>      </DrawerTrigger>      <DrawerContent>        <div className="mx-auto w-full max-w-sm">          <DrawerHeader>            <DrawerTitle>Move Goal</DrawerTitle>            <DrawerDescription>Set your daily activity goal.</DrawerDescription>          </DrawerHeader>          <div className="p-4 pb-0">            <div className="flex items-center justify-center space-x-2">              <Button                variant="outline"                size="icon"                className="h-8 w-8 shrink-0 rounded-full"                onClick={() => onClick(-10)}                disabled={goal <= 200}              >                <Minus />                <span className="sr-only">Decrease</span>              </Button>              <div className="flex-1 text-center">                <div className="text-7xl font-bold tracking-tighter">                  {goal}                </div>                <div className="text-muted-foreground text-[0.70rem] uppercase">                  Calories/day                </div>              </div>              <Button                variant="outline"                size="icon"                className="h-8 w-8 shrink-0 rounded-full"                onClick={() => onClick(10)}                disabled={goal >= 400}              >                <Plus />                <span className="sr-only">Increase</span>              </Button>            </div>            <div className="mt-3 h-[120px]">              <ResponsiveContainer width="100%" height="100%">                <BarChart data={data}>                  <Bar                    dataKey="goal"                    style={                      {                        fill: "hsl(var(--foreground))",                        opacity: 0.9,                      } as React.CSSProperties                    }                  />                </BarChart>              </ResponsiveContainer>            </div>          </div>          <DrawerFooter>            <Button>Submit</Button>            <DrawerClose asChild>              <Button variant="outline">Cancel</Button>            </DrawerClose>          </DrawerFooter>        </div>      </DrawerContent>    </Drawer>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Built on Vaul by Emil Kowalski—the same gesture-driven approach used in Linear, Vercel, and other mobile-first applications. Styled with Tailwind CSS so it matches your design system instead of looking like a generic slide menu.

npx shadcn@latest add drawer

Why drawers actually solve mobile UI problems

Here's the thing—mobile users expect different interactions than desktop users. They swipe, pinch, and drag. They use their thumbs, not precise mouse cursors. A modal that works perfectly on desktop feels alien on mobile. Drawers match how people actually use their phones.

Think about how you use your phone's control center or notification panel. You swipe up from bottom, see your content, swipe again to dismiss. That's muscle memory. This free shadcn drawer brings that familiar interaction pattern to your web apps.

Drawers also solve the space problem. Instead of shrinking your content to fit a modal, drawers slide over it. Users can see what's underneath, dismiss with a gesture, and never lose context. Whether you're building mobile-first interfaces, progressive web apps, or responsive designs in your Next.js applications, drawers that feel native keep users engaged in your JavaScript projects.

Common drawer patterns you'll actually use

Simple confirmation

Quick actions and confirmations:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Responsive dialog-drawer

Smart component that adapts to screen size:

Loading component...

"use client"import * as React from "react"import { cn } from "@/lib/utils"import { useMediaQuery } from "@/components/ui/shadcn-io/use-media-query"import { Button } from "@/components/ui/button"import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog"import {  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "@/components/ui/drawer"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"export default function DrawerResponsive() {  const [open, setOpen] = React.useState(false)  const isDesktop = useMediaQuery("(min-width: 768px)")  if (isDesktop) {    return (      <Dialog open={open} onOpenChange={setOpen}>        <DialogTrigger asChild>          <Button variant="outline">Edit Profile</Button>        </DialogTrigger>        <DialogContent className="sm:max-w-[425px]">          <DialogHeader>            <DialogTitle>Edit profile</DialogTitle>            <DialogDescription>              Make changes to your profile here. Click save when you're done.            </DialogDescription>          </DialogHeader>          <ProfileForm />        </DialogContent>      </Dialog>    )  }  return (    <Drawer open={open} onOpenChange={setOpen}>      <DrawerTrigger asChild>        <Button variant="outline">Edit Profile</Button>      </DrawerTrigger>      <DrawerContent>        <DrawerHeader className="text-left">          <DrawerTitle>Edit profile</DrawerTitle>          <DrawerDescription>            Make changes to your profile here. Click save when you're done.          </DrawerDescription>        </DrawerHeader>        <ProfileForm className="px-4" />        <DrawerFooter className="pt-2">          <DrawerClose asChild>            <Button variant="outline">Cancel</Button>          </DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  )}function ProfileForm({ className }: React.ComponentProps<"form">) {  return (    <form className={cn("grid items-start gap-6", className)}>      <div className="grid gap-3">        <Label htmlFor="email">Email</Label>        <Input type="email" id="email" defaultValue="[email protected]" />      </div>      <div className="grid gap-3">        <Label htmlFor="username">Username</Label>        <Input id="username" defaultValue="@shadcn" />      </div>      <Button type="submit">Save changes</Button>    </form>  )}

Controlled state

Programmatic drawer visibility control:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Multiple directions

Slide from any edge of the screen:

Loading component...

"use client"import { Button } from "@/components/ui/button"import {  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "@/components/ui/drawer"export default function DrawerDirections() {  return (    <div className="flex flex-wrap gap-4">      {/* Bottom drawer (default) */}      <Drawer>        <DrawerTrigger asChild>          <Button variant="outline">Bottom</Button>        </DrawerTrigger>        <DrawerContent>          <div className="mx-auto w-full max-w-sm">            <DrawerHeader>              <DrawerTitle>Bottom Drawer</DrawerTitle>              <DrawerDescription>This drawer slides up from the bottom.</DrawerDescription>            </DrawerHeader>            <div className="p-4">              <p className="text-sm text-muted-foreground">                The default drawer direction. Perfect for mobile interfaces.              </p>            </div>            <DrawerFooter>              <DrawerClose asChild>                <Button>Close</Button>              </DrawerClose>            </DrawerFooter>          </div>        </DrawerContent>      </Drawer>      {/* Top drawer */}      <Drawer direction="top">        <DrawerTrigger asChild>          <Button variant="outline">Top</Button>        </DrawerTrigger>        <DrawerContent>          <div className="mx-auto w-full max-w-sm">            <DrawerHeader>              <DrawerTitle>Top Drawer</DrawerTitle>              <DrawerDescription>This drawer slides down from the top.</DrawerDescription>            </DrawerHeader>            <div className="p-4">              <p className="text-sm text-muted-foreground">                Useful for notifications or secondary actions.              </p>            </div>            <DrawerFooter>              <DrawerClose asChild>                <Button>Close</Button>              </DrawerClose>            </DrawerFooter>          </div>        </DrawerContent>      </Drawer>      {/* Left drawer */}      <Drawer direction="left">        <DrawerTrigger asChild>          <Button variant="outline">Left</Button>        </DrawerTrigger>        <DrawerContent>          <div className="h-full w-full">            <DrawerHeader>              <DrawerTitle>Left Drawer</DrawerTitle>              <DrawerDescription>This drawer slides in from the left.</DrawerDescription>            </DrawerHeader>            <div className="p-4">              <p className="text-sm text-muted-foreground">                Great for navigation menus or sidebars.              </p>            </div>            <DrawerFooter>              <DrawerClose asChild>                <Button>Close</Button>              </DrawerClose>            </DrawerFooter>          </div>        </DrawerContent>      </Drawer>      {/* Right drawer */}      <Drawer direction="right">        <DrawerTrigger asChild>          <Button variant="outline">Right</Button>        </DrawerTrigger>        <DrawerContent>          <div className="h-full w-full">            <DrawerHeader>              <DrawerTitle>Right Drawer</DrawerTitle>              <DrawerDescription>This drawer slides in from the right.</DrawerDescription>            </DrawerHeader>            <div className="p-4">              <p className="text-sm text-muted-foreground">                Perfect for shopping carts or settings panels.              </p>            </div>            <DrawerFooter>              <DrawerClose asChild>                <Button>Close</Button>              </DrawerClose>            </DrawerFooter>          </div>        </DrawerContent>      </Drawer>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Nested drawers

Layer drawers for complex workflows:

Loading component...

"use client"import { Button } from "@/components/ui/button"import {  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "@/components/ui/drawer"export default function DrawerNested() {  return (    <Drawer>      <DrawerTrigger asChild>        <Button variant="outline">Open Parent Drawer</Button>      </DrawerTrigger>      <DrawerContent>        <div className="mx-auto w-full max-w-sm">          <DrawerHeader>            <DrawerTitle>Parent Drawer</DrawerTitle>            <DrawerDescription>              This drawer contains another drawer inside it.            </DrawerDescription>          </DrawerHeader>          <div className="p-4 space-y-4">            <p className="text-sm text-muted-foreground">              Click the button below to open a nested drawer.            </p>                        <Drawer>              <DrawerTrigger asChild>                <Button className="w-full">Open Nested Drawer</Button>              </DrawerTrigger>              <DrawerContent>                <div className="mx-auto w-full max-w-sm">                  <DrawerHeader>                    <DrawerTitle>Nested Drawer</DrawerTitle>                    <DrawerDescription>                      This is a drawer inside another drawer.                    </DrawerDescription>                  </DrawerHeader>                  <div className="p-4">                    <p className="text-sm text-muted-foreground">                      Nested drawers can be useful for multi-step workflows or                       detailed actions that need their own context.                    </p>                  </div>                  <DrawerFooter>                    <DrawerClose asChild>                      <Button>Close Nested</Button>                    </DrawerClose>                  </DrawerFooter>                </div>              </DrawerContent>            </Drawer>          </div>          <DrawerFooter>            <DrawerClose asChild>              <Button variant="outline">Close Parent</Button>            </DrawerClose>          </DrawerFooter>        </div>      </DrawerContent>    </Drawer>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Features

This free open source drawer component includes everything you need:

TypeScript-first - Full type safety with gesture events and state management
Vaul powered - Physics-based animations and native-feeling interactions
Gesture responsive - Swipe to open, drag to resize, tap to dismiss
Tailwind CSS styled - Customize with utilities, not fighting component CSS
Keyboard accessible - Tab navigation, Escape to close, focus management
Multi-directional - Slide from bottom, top, left, or right edges
Snap points - Multiple height positions for flexible content display
Mobile optimized - Touch targets and gestures designed for thumbs

API Reference

Core Components

Component	Purpose	Key Props
`Drawer`	Root container	`open`, `onOpenChange`, `direction`, `modal`
`DrawerTrigger`	Button that opens	`asChild` for custom triggers
`DrawerContent`	Sliding panel	Main content area
`DrawerHeader`	Title section	Groups title and description
`DrawerFooter`	Action buttons	Typically Submit/Cancel
`DrawerClose`	Close button	`asChild` for custom styling

Direction Options

Direction	Use Case	Behavior
`bottom`	Mobile forms, actions	Slides up from bottom
`top`	Notifications, alerts	Slides down from top
`left`	Navigation menus	Slides in from left
`right`	Shopping carts, settings	Slides in from right

Gesture Controls

Gesture	Action
Tap trigger	Open drawer
Drag handle	Resize drawer
Swipe opposite	Close drawer
Tap backdrop	Close drawer
Escape key	Close drawer

Production tips

Choose the right direction. This free shadcn/ui drawer works from any edge, but users have expectations. Bottom drawers feel natural for mobile actions like sharing or forms. Left/right drawers work for navigation. Your React component supports all directions—pick based on user mental models, not visual preference.

Make gestures discoverable. Users expect to drag the handle, but they need to see it first. Include a visual drag indicator or subtle animation hint. This TypeScript component provides the gestures—you provide the visual cues that teach users the interaction patterns.

Handle keyboard users. Touch gestures are great, but keyboard users need alternatives. Include visible close buttons, proper focus management, and Tab navigation. This open source shadcn component manages focus—you ensure all functionality is accessible in your Next.js applications.

Test on real devices. Drawer interactions feel different on actual phones versus browser dev tools. Thumb reach, screen size, and gesture sensitivity matter. The Tailwind CSS component is responsive, but test with real fingers on real screens.

Consider desktop alternatives. Drawers shine on mobile but can feel awkward on desktop. Maybe use Dialog components above certain breakpoints. Your JavaScript application should adapt to the device, not force mobile patterns everywhere.

Integration with other components

Drawers naturally work with Button components for triggers and actions in your React applications. Use Form components inside drawer content for data collection with proper validation.

For navigation patterns, combine drawers with NavigationMenu components to create mobile-first sidebar experiences. Separator components help organize drawer content into logical sections. This open source pattern keeps your mobile interfaces clean and navigable.

When building responsive layouts, pair drawers with Dialog components—drawer on mobile, dialog on desktop. Sheet components offer similar slide-out functionality with different styling. Your JavaScript application can choose the right pattern for each screen size.

For content organization, use drawers with Tabs components for multi-section forms or Accordion components for collapsible content. The drawer provides the container—other shadcn components handle the internal structure.

Shadcn Drawer

Drawer showcase

Why drawers actually solve mobile UI problems

Common drawer patterns you'll actually use

Simple confirmation

Responsive dialog-drawer

Controlled state

Multiple directions

Nested drawers

Features

API Reference

Core Components

Direction Options

Gesture Controls

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Drawer

Reactbutton

Reactdrawer

Reactbutton

Reactdrawer

Reactuse-media-query

Reactbutton

Reactdialog

Reactdrawer

Reactinput

Reactlabel

Reactbutton

Reactdrawer

Reactbutton

Reactdrawer

Reactbutton

Reactdrawer

When should I use Drawer vs Dialog?

What's the difference between Drawer and Sheet?

How do snap points work?

Are drawers accessible to screen readers?

Can I nest multiple drawers?

Do drawers impact performance?

How do I make drawers responsive?

Can I customize drawer animations?

On this page