Design · Components · Overlay

Sheet

A panel that slides in from an edge for secondary flows.

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/sheet.tsx. Registry items that depend on it install it automatically.

components/ui/sheet.tsx

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline">Open threads</Button>} />
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Threads</SheetTitle>
          <SheetDescription>Recent conversations.</SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  );
}

Examples

Sides

The mobile thread list in the assistant-ui examples is a left sheet.

API Reference

The parts wrap Base UI's Dialog primitives and accept their props.

SheetContent

SheetContentProps
side : "top" | "right" | "bottom" | "left" = "right"

The edge the panel enters from.

showCloseButton : boolean = true

Renders the corner close control.