Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sheet examples · Standard

Bottom-Sliding Sheet for React

A sheet that slides up from the bottom of the screen with a title and a description.

Framework
UI library

side="bottom" on SheetContent is the whole difference: the panel slides up from the bottom, and the title, the focus trap and Escape work as on every other edge. Use it for short choices and actions on small screens, where the thumb already is. The demo holds only the header, so put your own body under it.

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

FAQ

How do I open the sheet from the bottom?

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

How tall is the bottom sheet?

A bottom sheet spans the full width and is as tall as its content, here just SheetHeader. Cap a long one with a class such as data-[side=bottom]:max-h-[50vh] and let its body scroll.

What does the bottom 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 Bottom Sheet, and SheetDescription reads This sheet slides up from the bottom 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 bottom 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.

All 29 sheet examples