Skip to content

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

Free

Sheet with Title and Description for Ark UI

An Open Sheet button opens a right-side panel titled Sheet Title, with a description and no body or footer.

The trigger says Open Sheet. The panel title is Sheet Title. The description says it provides additional context. Nothing sits under the header.

Start here, then add a body and actions. A Dialog is the centered version of the same header. In React, Ark UI uses the title as the dialog name.

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 asChild>
    <Button>Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>
        This is a description that provides additional context about the sheet
        content.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

FAQ

What do the title and description say?

SheetTitle reads Sheet Title and SheetDescription reads This is a description that provides additional context about the sheet content. Both sit in SheetHeader, and nothing else is in the panel.

Why does a sheet need a SheetTitle?

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. SheetDescription is optional; it's read after the title when the sheet opens.

Which edge does this sheet use?

SheetContent leaves side unset, so the panel comes from the right. Set side to top, bottom or left to move it. The title and the focus trap work the same on every edge.

How does Open Sheet open it?

The button labeled Open Sheet is the trigger, and its text is the accessible name. SheetTrigger takes asChild and merges onto the one Button inside it.

How do I hide the corner close button?

Set showCloseButton to false on SheetContent. Then add a visible Close button, for example in a SheetFooter. Escape still closes the sheet.

When should I use a Sheet for this layout?

Use a Sheet when the panel should slide in from a screen edge and keep the page in view behind it. A centered confirmation is a Dialog. A panel people drag, usually up from the bottom on a phone, is a Drawer.

API Reference

Sheet

Sets asChild. The rest is on the Sheet page.

Button

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

All 29 sheet examples