Sheet

Extends the Dialog component to display content that complements the main content of the screen. Perfect for sidebars, forms, and secondary content in React applications with Next.js and TypeScript.

Ever notice how the best mobile apps have those panels that slide in from the edges? That's what sheets do - they're like sidebars but way more flexible. Need a settings panel that slides in from the right? A notification bar from the top? A mobile-style bottom sheet? This component handles all of that.

Quick profile editor

Clean form in a side panel:

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 }

Built on Radix UI Dialog with focus management and proper ARIA semantics. This free open source React component handles the overlay, positioning, and animations while you focus on what goes inside.

npx shadcn@latest add sheet

Why sheets beat regular modals

Sheets feel more natural than popup modals:

Edge positioning - Slides in from top, right, bottom, or left
Less intrusive - Doesn't cover the whole screen like modals
Better mobile UX - Native app feel with smooth animations
Focus management - Traps focus properly with keyboard navigation
Flexible sizing - Custom widths and heights that make sense
Contextual - Keeps main content visible while showing details

Practical sheet patterns

Different sides

Panels that slide from any edge:

Loading component...

import { Button } from "@/components/ui/button"import {  Sheet,  SheetContent,  SheetDescription,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/ui/sheet"export default function SheetSide() {  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="flex gap-2 flex-wrap justify-center">        <Sheet>          <SheetTrigger asChild>            <Button variant="outline">Left</Button>          </SheetTrigger>          <SheetContent side="left">            <SheetHeader>              <SheetTitle>Left sidebar</SheetTitle>              <SheetDescription>                This sheet slides in from the left side of the screen.              </SheetDescription>            </SheetHeader>            <div className="mt-6 space-y-4">              <div className="flex items-center space-x-2">                <div className="w-2 h-2 bg-green-500 rounded-full"></div>                <span>Dashboard</span>              </div>              <div className="flex items-center space-x-2">                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>                <span>Analytics</span>              </div>              <div className="flex items-center space-x-2">                <div className="w-2 h-2 bg-purple-500 rounded-full"></div>                <span>Settings</span>              </div>            </div>          </SheetContent>        </Sheet>        <Sheet>          <SheetTrigger asChild>            <Button variant="outline">Right</Button>          </SheetTrigger>          <SheetContent side="right">            <SheetHeader>              <SheetTitle>Right sidebar</SheetTitle>              <SheetDescription>                This sheet slides in from the right side.              </SheetDescription>            </SheetHeader>            <div className="mt-6 space-y-3">              <div className="p-3 bg-muted rounded-lg">                <h4 className="font-medium">Recent Activity</h4>                <p className="text-sm text-muted-foreground mt-1">Updated 2 minutes ago</p>              </div>              <div className="p-3 bg-muted rounded-lg">                <h4 className="font-medium">Notifications</h4>                <p className="text-sm text-muted-foreground mt-1">3 new messages</p>              </div>            </div>          </SheetContent>        </Sheet>        <Sheet>          <SheetTrigger asChild>            <Button variant="outline">Top</Button>          </SheetTrigger>          <SheetContent side="top">            <SheetHeader>              <SheetTitle>Top notification</SheetTitle>              <SheetDescription>                Perfect for announcements and notifications.              </SheetDescription>            </SheetHeader>            <div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">              <p className="text-sm">🎉 Welcome to the new update! Check out our latest features.</p>            </div>          </SheetContent>        </Sheet>        <Sheet>          <SheetTrigger asChild>            <Button variant="outline">Bottom</Button>          </SheetTrigger>          <SheetContent side="bottom">            <SheetHeader>              <SheetTitle>Bottom sheet</SheetTitle>              <SheetDescription>                Great for mobile-style bottom sheets and quick actions.              </SheetDescription>            </SheetHeader>            <div className="grid grid-cols-3 gap-4 mt-6">              <Button variant="outline" size="sm">Share</Button>              <Button variant="outline" size="sm">Edit</Button>              <Button variant="outline" size="sm">Delete</Button>            </div>          </SheetContent>        </Sheet>      </div>    </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 }

Project creation form

Complex form in a wide sheet:

Loading component...

"use client"import { useState } from "react"import { Button } from "@/components/ui/button"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"import { Textarea } from "@/components/ui/textarea"import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue,} from "@/components/ui/select"import {  Sheet,  SheetClose,  SheetContent,  SheetDescription,  SheetFooter,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/ui/sheet"export default function SheetForm() {  const [isSubmitting, setIsSubmitting] = useState(false)  const handleSubmit = async (e: React.FormEvent) => {    e.preventDefault()    setIsSubmitting(true)    // Simulate API call    await new Promise(resolve => setTimeout(resolve, 1000))    setIsSubmitting(false)  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <Sheet>        <SheetTrigger asChild>          <Button>Add New Project</Button>        </SheetTrigger>        <SheetContent className="w-[400px] sm:w-[540px]">          <SheetHeader>            <SheetTitle>Create new project</SheetTitle>            <SheetDescription>              Set up your project details. Click save when you're ready to get started.            </SheetDescription>          </SheetHeader>          <form onSubmit={handleSubmit} className="space-y-6 py-6">            <div className="space-y-2">              <Label htmlFor="project-name">Project name</Label>              <Input                id="project-name"                placeholder="My awesome project"                required              />            </div>                        <div className="space-y-2">              <Label htmlFor="description">Description</Label>              <Textarea                id="description"                placeholder="Tell us what this project is about..."                rows={3}              />            </div>            <div className="space-y-2">              <Label htmlFor="framework">Framework</Label>              <Select required>                <SelectTrigger>                  <SelectValue placeholder="Select a framework" />                </SelectTrigger>                <SelectContent>                  <SelectItem value="next">Next.js</SelectItem>                  <SelectItem value="react">React</SelectItem>                  <SelectItem value="vue">Vue.js</SelectItem>                  <SelectItem value="svelte">Svelte</SelectItem>                  <SelectItem value="astro">Astro</SelectItem>                </SelectContent>              </Select>            </div>            <div className="grid grid-cols-2 gap-4">              <div className="space-y-2">                <Label htmlFor="visibility">Visibility</Label>                <Select defaultValue="private">                  <SelectTrigger>                    <SelectValue />                  </SelectTrigger>                  <SelectContent>                    <SelectItem value="public">🌍 Public</SelectItem>                    <SelectItem value="private">🔒 Private</SelectItem>                  </SelectContent>                </Select>              </div>                            <div className="space-y-2">                <Label htmlFor="template">Template</Label>                <Select defaultValue="blank">                  <SelectTrigger>                    <SelectValue />                  </SelectTrigger>                  <SelectContent>                    <SelectItem value="blank">Blank</SelectItem>                    <SelectItem value="blog">Blog</SelectItem>                    <SelectItem value="ecommerce">E-commerce</SelectItem>                    <SelectItem value="dashboard">Dashboard</SelectItem>                  </SelectContent>                </Select>              </div>            </div>            <SheetFooter>              <SheetClose asChild>                <Button variant="outline">Cancel</Button>              </SheetClose>              <Button type="submit" disabled={isSubmitting}>                {isSubmitting ? "Creating..." : "Create project"}              </Button>            </SheetFooter>          </form>        </SheetContent>      </Sheet>    </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 }

These patterns solve real problems - settings panels that don't interrupt your workflow, forms that need more space than a modal, mobile-friendly action sheets.

Perfect for secondary actions

Works great for anything that complements your main content - user profiles, settings, filters, detailed forms, help panels. The kind of stuff that's important but shouldn't take over the entire screen.

Drops right into Next.js projects. Full TypeScript support. Styled with Tailwind CSS to match the shadcn design system.

Built on Radix UI Dialog

Uses Radix UI Dialog under the hood, which handles the complex stuff:

Focus trapping - Keyboard navigation stays inside the sheet
Escape key - Closes automatically when users press escape
Overlay clicks - Click outside to close (or disable it)
Screen reader - Proper announcements and aria attributes
Portal rendering - No z-index conflicts
Animation ready - Smooth enter/exit transitions

API Reference

The root container that manages sheet state.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Default open state for uncontrolled
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Called when open state changes
`modal`	`boolean`	`true`	Whether sheet is modal

SheetTrigger

The button that opens the sheet.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Pass functionality to child element

Data attributes:

[data-state]: "open" | "closed"

SheetContent

The sheet panel with content.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	Which edge to slide from
`className`	`string`	-	Additional CSS classes
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Handle escape key press
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	-	Handle clicks outside

Data attributes:

[data-state]: "open" | "closed"
[data-side]: "top" | "right" | "bottom" | "left"

SheetHeader

Container for sheet title and description.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

SheetTitle

Accessible title announced to screen readers.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

SheetDescription

Optional description for screen readers.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

SheetFooter

Container for action buttons.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

SheetClose

Button that closes the sheet.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Pass functionality to child element

Key	Action
`Tab`	Move focus to next focusable element
`Shift + Tab`	Move focus to previous focusable element
`Escape`	Close the sheet

Side Options

Value	Use Case	Best For
right	Settings, details, filters	Desktop sidebars, configuration panels
left	Navigation, menus	App navigation, drawer menus
bottom	Actions, quick forms	Mobile interfaces, action sheets
top	Notifications, alerts	Banners, announcement bars

Common Patterns

Pattern	Use Case	Implementation
Settings panel	User preferences	Right side with form controls
Navigation drawer	App menu	Left side with navigation links
Filter sidebar	Search filters	Right side with checkboxes/selects
Quick actions	Mobile actions	Bottom with button grid
Notifications	Alerts, announcements	Top with dismissible content

Design tips for better sheets

Keep these in mind when building sheets:

Size appropriately - Wide enough for content, not too wide to overwhelm
Consider mobile - Bottom sheets often work better on small screens
Keep it contextual - Content should relate to what's on the main screen
Don't overload - Sheets work best with focused, specific content
Test keyboard nav - Make sure tab order makes sense
Handle long content - Add scrolling when content exceeds viewport
Use proper headers - Title and description help screen readers

Sheet

Quick profile editor

Why sheets beat regular modals

Practical sheet patterns

Different sides

Project creation form

Perfect for secondary actions

Built on Radix UI Dialog

API Reference

Sheet

SheetTrigger

SheetContent

SheetHeader

SheetTitle

SheetDescription

SheetFooter

SheetClose

Keyboard Navigation

Side Options

Common Patterns

Design tips for better sheets

On this page

Sheet

Reactbutton

Reactinput

Reactlabel

Reactsheet

Reactbutton

Reactsheet

Reactbutton

Reactinput

Reactlabel

Reacttextarea

Reactselect

Reactsheet

On this page