Sheet

Docs

Sheet

Extends the Dialog component to display content that complements the main content of the screen.

This component uses Radix UI

import {
  Button,
  Input_Shadcn_,
  Label_Shadcn_,
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetSection,
  SheetTitle,
  SheetTrigger,
} from 'ui'
 
export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button type="outline">Show Sheet</Button>
      </SheetTrigger>
      <SheetContent className="flex flex-col gap-0">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>Make changes to your profile here.</SheetDescription>
        </SheetHeader>
        <div className="overflow-auto flex-grow px-0">
          <SheetSection>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label_Shadcn_ htmlFor="name" className="text-right">
                  Name
                </Label_Shadcn_>
                <Input_Shadcn_ id="name" value="Pedro Duarte" className="col-span-3" readOnly />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label_Shadcn_ htmlFor="username" className="text-right">
                  Username
                </Label_Shadcn_>
                <Input_Shadcn_ id="username" value="@peduarte" className="col-span-3" readOnly />
              </div>
            </div>
          </SheetSection>
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button type="primary">Save changes</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Use for side panels
- Forms with multiple fields
- Settings panels
- Detailed editors
Consider screen size
- Sheets work well on desktop
- On mobile, consider full-screen or bottom sheet variants
Structure content clearly
- Use SheetHeader and SheetTitle for context
- Use SheetSection to group related fields
- Use SheetFooter for actions

Installation

npx shadcn-ui@latest add sheet

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  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. This will permanently delete your account and remove your data
        from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Nonmodal

This sheet is nonmodal, meaning it does not block the underlying content. It’s useful when you want to display content that complements the main content of the screen.

To have the underlying content resize to fit the sheet (so nothing is overlapping) use the Sidebar component or build a custom panel. You can refer to the following Studio components for guidance:

AIAssistant
EditorPanel
AdvisorPanel

See LayoutSidebarProvider for more.

Size

You can adjust the size of the sheet using CSS classes:

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent className="w-[400px] sm:w-[540px]">
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Side

Use the side property to <SheetContent /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

That said, stick to the default right unless you have a strong reason not to.

PreviousSeparator

NextSkeleton