Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt

Use this file to discover all available pages before exploring further.

​
Installation

npx shadcn@latest add sheet

​
Usage

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

​
Component API

​
Sheet

Root sheet component. Built on Radix UI Dialog. 
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>)
Props:
  • open - Controlled open state
  • onOpenChange - Callback when open state changes
  • defaultOpen - Default open state
  • modal - Whether to render as modal (default: true)

​
SheetTrigger

Button that opens the sheet. 
function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>)

​
SheetClose

Button that closes the sheet. 
function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>)

​
SheetContent

Sheet content panel with overlay. 
function SheetContent({
  className,
  children,
  side = "right",
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: "top" | "right" | "bottom" | "left"
  showCloseButton?: boolean
})
Props:
  • side - Edge where sheet appears ("top" | "right" | "bottom" | "left")
  • showCloseButton - Show/hide close button (default: true)

​
SheetHeader

Header section for title and description. 
function SheetHeader({ className, ...props }: React.ComponentProps<"div">)

​
SheetFooter

Footer section for actions. 
function SheetFooter({ className, ...props }: React.ComponentProps<"div">)

​
SheetTitle

Sheet title heading. 
function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>)

​
SheetDescription

Sheet description text. 
function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>)

​
Examples

​
Basic Sheet

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <div className="grid gap-4 py-4">
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="name" className="text-right">
          Name
        </Label>
        <Input id="name" value="Pedro Duarte" className="col-span-3" />
      </div>
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

​
Different Sides

Sheet can slide from any edge:

    ​
    No Close Button

    Hide the default close button: 
    <Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent showCloseButton={false}>
    <SheetHeader>
      <SheetTitle>Custom Close</SheetTitle>
    </SheetHeader>
    <SheetFooter>
      <SheetClose asChild>
        <Button>Custom Close Button</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

    ​
    Controlled Sheet

    function ControlledSheet() {
  const [open, setOpen] = React.useState(false)

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button>Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Controlled</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

    ​
    Navigation Menu

    Mobile navigation drawer: 
    <Sheet>
  <SheetTrigger asChild>
    <Button variant="outline" size="icon">
      <Menu className="h-4 w-4" />
    </Button>
  </SheetTrigger>
  <SheetContent side="left">
    <nav className="flex flex-col gap-4">
      <a href="/" className="text-lg font-semibold">
        Home
      </a>
      <a href="/about" className="text-lg">
        About
      </a>
      <a href="/services" className="text-lg">
        Services
      </a>
      <a href="/contact" className="text-lg">
        Contact
      </a>
    </nav>
  </SheetContent>
</Sheet>

    ​
    Accessibility

    • Focus is trapped within the sheet
    • Escape key closes the sheet
    • Background is inert when sheet is open
    • Proper ARIA attributes for dialogs
    • Focus returns to trigger on close

    ​
    API Reference

    See the Radix UI Dialog documentation for complete API reference.