Sheet

Preview

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

npx shadcn@latest add https://ds.interlace.tools/r/sheet.json

npx shadcn@latest add @interlace/sheet

Import

12 named exports — pull the parts you need.

import { MIN_VIEWPORT, Sheet, SheetClose, SheetCompose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from '@/components/ui/sheet';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

Sheet                            (Dialog.Root — renders no DOM node)
    ├─ SheetTrigger                (Dialog.Trigger)
    └─ SheetPortal                 (Dialog.Portal)
         ├─ SheetOverlay           (Dialog.Backdrop — fixed, bg-black/50)
         └─ SheetContent           (Dialog.Popup — data-side, data-min-viewport=320)
              ├─ SheetHeader → SheetTitle + SheetDescription
              ├─ children
              ├─ SheetFooter       (mt-auto)
              └─ a Dialog.Close "X" (always rendered, sr-only label "Close")
`SheetContent` mounts its own `SheetPortal` and `SheetOverlay`, so neither is
needed at a call site — nesting one inside a hand-written `SheetPortal` +
`SheetOverlay` stacks two `bg-black/50` scrims and dims the page to 75%
instead of 50%. `SheetCompose` therefore renders `SheetContent` alone, and
`primitive-api-contract-lock` counts the backdrops to keep it that way.
Every prop this file does not name rides through to `Dialog.Root`, including
Base UI's `modal` — pass `modal={false}` for a drawer that leaves the page
interactive, and the focus trap and inerting go with it.
`bg-black/50` on the scrim is deliberate and NOT a theme token: a paired
token would invert in dark mode and light the page up behind the panel.

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour

Owned by @base-ui/react/dialog — focus trapping, dismissal and typeahead come from the headless primitive, not from us.

Focus ring (WCAG 2.2 SC 2.4.13)

Inherited from the preflight focus contract shipped in @interlace/theme.

Reduced motion

No animation to gate.

ARIA in the source

None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

3 more states from the same story file.

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Dependencies

Base UI primitive

@base-ui/react/dialog

Lucide icons

• XIcon

NPM dependencies

• @base-ui/react
• lucide-react

Registry dependencies

• @interlace/theme
• @interlace/cn

Source

The full implementation — components/ui/sheet.tsx once installed.

'use client';

import * as React from 'react';

// @interlace/sheet v1.4.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/sheet
// What changed since: https://ds.interlace.tools/c/sheet#history
// Generated banner — keep it, the upgrade diff reads this version.

// Mirrors the shadcn Sheet canon — Dialog with side-anchored variants.
// Built on Base UI's Dialog primitives.
// Upstream: https://base-ui.com/react/components/dialog

/**
 * @interlace/ui — Sheet
 *
 * A modal panel anchored to one edge of the viewport — a nav drawer, a filter
 * panel, a settings pane. Base UI's Dialog owns the open state, the focus
 * trap, page inerting, Escape and outside-press dismissal; we own the scrim,
 * the slide and the side geometry.

…275 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.