Skip to content

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

Free

Bottom-Sliding Sheet for Vue

An Open Sheet button slides a panel up from the bottom, titled Bottom Sheet, with a one-line description and no body.

UI library: Ark UI

Open Sheet is the trigger. The panel is titled Bottom Sheet. Its description says it slides up from the bottom of the screen. Nothing sits under the header.

Use the bottom edge for a short choice on a phone. A centered question belongs in a Dialog. In Vue, Ark UI still traps focus from this edge.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Sheet>
  <SheetTrigger :asChild="true"><Button>Open Sheet</Button></SheetTrigger>
  <SheetContent side="bottom">
    <SheetHeader>
      <SheetTitle>Bottom Sheet</SheetTitle>
      <SheetDescription>
        This sheet slides up from the bottom of the screen.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

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. SheetTrigger takes asChild and merges onto the one Button inside it.

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.

API Reference

Sheet

Sets asChild and side="bottom". 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