Skip to content
Aback UI

Overlays

Sheet

A modal panel that slides in from an edge for settings and filters.

BetaUsed in Aback Tools, Aback Launch, Aback GroupRegistry JSON (opens in a new tab)

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add sheet

Writes components/ui/sheet.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

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

API reference

Props and composition points for Sheet. Native element props pass through.

PropTypeDefaultDescription
open / defaultOpen / onOpenChangeboolean / boolean / (open: boolean) => voidNoneControlled or uncontrolled visibility.
side"top" | "right" | "bottom" | "left""right"Edge the panel slides in from. Right suits settings and filters.
showCloseButtonbooleantrueRenders a labelled 32px close control in the top corner.
SheetTitle / SheetDescriptioncomponentNoneTitle is the accessible name and is required. Description supplies the accessible description.

Dependencies: @tabler/icons-react, radix-ui, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Renders a modal dialog, traps focus, locks background scroll, closes on Escape, and returns focus to the trigger.
  • Always render SheetTitle. If the design shows no title, hide it visually instead of omitting the accessible name.
  • The panel scrolls internally and is capped at 85dvh on top and bottom edges, so long forms stay reachable.
  • The close button has a screen-reader label. Do not make the overlay the only way to dismiss the sheet.

Keyboard

KeyAction
EscapeClose and return focus to the trigger.
TaborShift+TabCycle focus inside the panel.
EnterorSpaceActivate the focused control.

Used in production

The Aback products whose interfaces shaped this component.

Related