Avala Design
← Components/primitives

Sheet

Slide-out panel. Wraps Radix Dialog with side-aware positioning. Preserves the legacy @avala/ui Sheet API surface so consumer apps (mission_control sidebar, marketing mobile nav) migrate without churn.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Sheet, SheetBody, SheetClose, SheetContent } from "@avala/design";

<Sheet side="right">
  <SheetBody />
  <SheetClose />
  <SheetContent />
</Sheet>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-sheet--defaultOpen in Storybook →

When to use

  • Slide-out side panels: detail views, mobile nav, secondary settings.
  • Long-form panels where edge-anchoring is more natural than centered modal layout.

When not to use

  • Centered modal forms / confirmations → use `Dialog` or `AlertDialog`.
  • Tiny anchored overlays → use `Popover`.
  • Inline expand/collapse → use the Accordion pattern.