Command Menu

Search documentation, components, and switch theme.

Atoms

Sheet

A panel that slides out from the edge of the screen.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/sheet

Install the following dependencies:

npm install radix-ui lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Configuration</SheetTitle>
      <SheetDescription>Update your stack settings.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples#

Side Variants#

Use the side prop to render the sheet from different edges of the screen.