jsp-dsv0.1

Sheetshadcn

A panel that slides in from an edge.

Overlays
Install
npx shadcn add sheet
Import from
@/components/ui/sheet
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

Secondary work beside the page – filters, details, a mobile nav.

Guidance

When to use

  • Secondary work beside the page that people dip into and out of: filters, details of a row, a mobile nav.

When not to use

  • For a focused task with a result – use a Dialog.

Rules

  • A SheetTitle says what it is; actions go in SheetFooter.
  • Right side for details and filters; left for navigation.
  • Like a dialog, it traps focus, closes on Esc and returns focus to the trigger.

Spec

The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.

TokenCSS variableValue now
color.surface.defaultT-3: surface.overlay to come--popover…
color.text.default--popover-foreground…
color.border.subtle--border…
shadow.lg--shadow-lg…

Install

Terminal
npx shadcn add sheet
Import
import { Sheet } from "@/components/ui/sheet"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.