Sheet

A slide-in side panel built on Radix UI Dialog. Identical to Dialog in behavior (focus trap, scroll lock, Escape key) but slides in from a screen edge. Available from all four sides.

Built on Radix UI.

✓Slides from top, right, bottom, or left
✓Same accessibility guarantees as Dialog
✓Focus trap and scroll lock
✓Controlled and uncontrolled
✓Built on Dialog — shares all dialog API

import { Sheet }from "@aetherstack/ui"

sheet.tsx

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

export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Settings</SheetTitle>
          <SheetDescription>
            Make changes to your profile here.
          </SheetDescription>
        </SheetHeader>
        {/* sheet body content */}
      </SheetContent>
    </Sheet>
  )
}

Usage

All four sides

Use the side prop to control where the sheet slides in from.

Navigation drawer

Use a left Sheet as a responsive navigation drawer.

Settings panel

A right-side settings panel is common in SaaS dashboards.

Props

Prop	Type	Default	Description

Sheet (Root)

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	—	Callback when open state changes.

SheetContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"right"	The edge the sheet slides in from.
className	string	—	Use sm:max-w-* to control sheet width.
onInteractOutside	(e: Event) => void	—	Called when user clicks the overlay. Prevent default to disable close-on-click.

* Required props

Accessibility

→Same accessibility behavior as Dialog — focus trap, aria-modal, role='dialog'.
→SheetTitle provides the accessible name and is required.
→Escape key always closes the sheet unless prevented.
→For a navigation drawer, add role='navigation' and an aria-label to the nav element inside.