Railbase
GPTClaude

Sheet

A dialog that slides in from a screen edge (side drawer).

Updated

Side panel
<Sheet>
  <SheetTrigger asChild><Button variant="outline">Open</Button></SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile here.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

A dialog that slides in from a screen edge (side drawer).

Installation

railbase ui add sheet

Peer dependencies:

npm install class-variance-authority

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

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

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes, then save.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Anatomy

Exported parts: Sheet · SheetTrigger · SheetClose · SheetPortal · SheetOverlay · SheetContent · SheetHeader · SheetFooter · SheetTitle · SheetDescription

← PreviousSeparatorNext →Sidebar