Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Sheet with Header, Content, and Footer for React

An Open Sheet button reveals Complete Your Profile, a short paragraph, and footer buttons labeled Cancel and Continue.

The title is Complete Your Profile. The description says to fill in information to get started. A short paragraph fills the middle. Cancel and Continue sit at the bottom.

Use this split when the actions must stay put under a changing body. A one-question task fits a Dialog better. In React, Base UI does not treat Continue as a submit.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger render={<Button />}>Open Sheet</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Complete Your Profile</SheetTitle>
      <SheetDescription>
        Fill in your information to get started
      </SheetDescription>
    </SheetHeader>
    <div className="flex-1 p-4">
      <p className="text-muted-foreground text-sm">
        This is the main content area of the sheet. It can contain forms,
        lists, or any other content you need to display.
      </p>
    </div>
    <SheetFooter>
      <SheetClose render={<Button className="w-full" variant="outline" />}>
        Cancel
      </SheetClose>
      <Button className="w-full">Continue</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

FAQ

How is the sheet split into header, body and footer?

SheetContent is a flex column. SheetHeader comes first, the body div has flex-1 so it fills the space in between, and SheetFooter sits last.

How does Cancel close the sheet?

It's wrapped in SheetClose, which dismisses the sheet when pressed. Pass your button to SheetClose with render.

Does Continue do anything?

Not yet: it's a plain Button. Run your next step from it, and close the sheet by controlling its open state if that step leaves the panel: Pass open to Sheet; onOpenChange receives the next boolean.

What if the body gets long?

Add overflow-y-auto to the body next to flex-1. The body then scrolls while the header and footer stay in place.

How does Open Sheet open it?

The button labeled Open Sheet is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

What does the sheet announce?

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Complete Your Profile, with Fill in your information to get started as the description.

API Reference

Sheet

No extra props in this demo. The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

All 29 sheet examples