Skip to content
Cuelark UI
OverlaysAnimated

Sheet

Side panels and drawers that slide in, with a footer tray.

A sheet slides a panel in from an edge: filters, settings, carts, mobile navigation. Cuelark sheets slide in on the house ease, their sections settle in one after another, and the footer sits in a muted tray under a dashed rule.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/sheet.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/sheet.

Builds on: motion

Usage

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

<Sheet>
  <SheetTrigger asChild><Button>Open</Button></SheetTrigger>
  <SheetContent side="right">
    <SheetHeader><SheetTitle>Settings</SheetTitle></SheetHeader>
  </SheetContent>
</Sheet>

Motion

How it moves

Slides in from its side, then header, body and footer settle in turn (GSAP stagger).

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

SheetContent

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""right"Edge it slides from.

Sheet · SheetTrigger · SheetClose · SheetHeader · SheetBody · SheetFooter · SheetTitle · SheetDescription

Accessibility

  • A modal dialog: focus is trapped and returns to the trigger.
  • Esc closes; an Esc hint sits next to the close button.

FAQ

Also searched as: react sheet · side drawer · slide over panel · shadcn sheet · off canvas menu