Skip to content

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

Free

Left-Sided Sheet for React

An Open Sheet button slides a panel in from the left, titled Left Sheet, with a one-line description and no body.

Open Sheet is the trigger. The panel is titled Left Sheet. Its description says it slides in from the left side of the screen.

Use the left edge for navigation people expect from the start of the page. A Sidebar fits if that navigation stays visible. In React, Base UI still closes this panel with Escape.

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 side="left">
    <SheetHeader>
      <SheetTitle>Left Sheet</SheetTitle>
      <SheetDescription>
        This sheet slides in from the left side of the screen.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

FAQ

How do I open the sheet from the left?

Set side="left" on SheetContent. Leave it out and the sheet opens from the right. It takes top, right, bottom or left.

How wide is the left sheet?

A left sheet fills the height and caps its width from the sm breakpoint. Change the cap with a class such as data-[side=left]:sm:max-w-md on SheetContent.

What does the left 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. Here it reads Left Sheet, and SheetDescription reads This sheet slides in from the left side of the screen.

How is Open Sheet connected?

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.

How do I hide the corner close icon?

Set showCloseButton to false on SheetContent, and give people a visible way out instead, such as a Close button in SheetFooter. Escape still closes the sheet.

When is a left sheet the right panel?

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 side="left". 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