Drawer

A versatile drawer component for slide-out panels and mobile-first interfaces. Perfect for navigation menus, forms, and contextual actions.

Looking for a sleek way to add slide-out panels to your app? Drawers provide an elegant solution for mobile navigation, forms, and actions that need space without cluttering your main interface.

Interactive drawer

A drawer with interactive content and smooth animations:

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, this drawer component brings native-like interactions with gesture support, smooth animations, and accessibility features.

npx shadcn@latest add drawer

Why drawers enhance user experience

Drawers offer intuitive interactions that users expect:

Mobile-first design - Natural gesture support for touch interfaces
Space efficient - Maximize content area while keeping actions accessible
Gesture friendly - Swipe to open, drag to close feels intuitive
Smooth animations - Physics-based animations that respond to user input
Multiple directions - Slide from bottom, top, left, or right as needed
Backdrop control - Click outside to close or prevent accidental dismissal
Keyboard accessible - Full keyboard navigation and screen reader support
Responsive ready - Combine with dialogs for desktop/mobile experiences

Essential drawer patterns

Simple confirmation drawer

Quick actions and confirmations work great in drawers:

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 drawer state

Programmatically control drawer visibility:

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

Drawers can 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 }

API Reference

The root component that manages drawer state and behavior.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the drawer is open
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`modal`	`boolean`	`true`	Whether to render as modal with backdrop
`direction`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Direction drawer slides from
`dismissible`	`boolean`	`true`	Whether drawer can be dismissed by user
`shouldScaleBackground`	`boolean`	`true`	Whether to scale background content
`snapPoints`	`number[]`	-	Snap points for drawer height (0-1)
`activeSnapPoint`	`number`	-	Currently active snap point
`setActiveSnapPoint`	`(snapPoint: number) => void`	-	Set active snap point
`children`	`React.ReactNode`	-	Drawer content components

DrawerTrigger

Button or element that opens the drawer.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of button
`children`	`React.ReactNode`	-	Trigger content

DrawerContent

The main content area that slides in and out.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Content to display in drawer

DrawerHeader

Header section with title and description.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Header content (typically title and description)

DrawerTitle

Accessible title for the drawer.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Title text

DrawerDescription

Optional description for additional context.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Description text

DrawerFooter

Footer area for actions and controls.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Footer content (typically buttons)

DrawerClose

Button that closes the drawer.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of button
`children`	`React.ReactNode`	-	Close button content

Drawer Directions

Direction	Behavior	Best Use Cases
`bottom`	Slides up from bottom edge	Mobile forms, actions, confirmations
`top`	Slides down from top edge	Notifications, secondary menus
`left`	Slides in from left edge	Navigation menus, filters
`right`	Slides in from right edge	Shopping carts, settings panels

Gesture Controls

Gesture	Action
Tap trigger	Open drawer
Drag handle	Move drawer position
Swipe down	Close bottom drawer
Swipe up	Close top drawer
Swipe right	Close left drawer
Swipe left	Close right drawer
Tap backdrop	Close drawer (if dismissible)
Escape key	Close drawer

Key	Action
`Escape`	Close drawer
`Tab`	Move to next focusable element
`Shift + Tab`	Move to previous focusable element
`Space`/`Enter`	Activate focused element

Snap Points

Snap points allow drawers to stop at specific heights:

Value	Description
`0.5`	Half screen height
`0.8`	80% of screen height
`1.0`	Full screen height

Best practices for drawers

Design drawers that feel natural and responsive:

Clear purpose - Each drawer should have a focused, specific task
Appropriate direction - Bottom for mobile actions, sides for navigation
Proper sizing - Don't make drawers too small or overwhelmingly large
Gesture support - Allow drag-to-dismiss where it makes sense
Loading states - Show loading indicators for async content
Responsive design - Consider dialog alternatives for desktop
Focus management - Trap focus inside modal drawers
Content scrolling - Handle overflow content gracefully
Performance - Lazy load content for better perceived performance

Drawer

Interactive drawer

Why drawers enhance user experience

Essential drawer patterns

Simple confirmation drawer

Responsive dialog-drawer

Controlled drawer state

Multiple directions

Nested drawers

API Reference

Drawer

DrawerTrigger

DrawerContent

DrawerHeader

DrawerTitle

DrawerDescription

DrawerFooter

DrawerClose

Drawer Directions

Gesture Controls

Keyboard Navigation

Snap Points

Best practices for drawers

On this page

Drawer

Reactbutton

Reactdrawer

Reactbutton

Reactdrawer

Reactuse-media-query

Reactbutton

Reactdialog

Reactdrawer

Reactinput

Reactlabel

Reactbutton

Reactdrawer

Reactbutton

Reactdrawer

Reactbutton

Reactdrawer

On this page