@darksnow-ui/sheet v1.0.0

Sheet

Extends the Dialog component to display content that complements the main content of the screen. Built on top of Radix UI Dialog primitive.

Installation

npm install @darksnow-ui/sheet

Peer Dependencies

npm install react react-dom

Usage

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

export function SheetExample() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" value="Pedro Duarte" className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input id="username" value="@peduarte" className="col-span-3" />
          </div>
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button type="submit">Save changes</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Components

Sheet

The root container component.

SheetTrigger

The button that opens the sheet.

SheetContent

The sheet content container.

SheetHeader, SheetFooter

Containers for header and footer content.

SheetTitle, SheetDescription

Accessible title and description components.

SheetClose

Closes the sheet when activated.

Examples

Different Sides

<Sheet>
  <SheetTrigger asChild>
    <Button>Open Left</Button>
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Left Sheet</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>

Mobile Menu

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline" size="icon">
      <MenuIcon className="h-4 w-4" />
    </Button>
  </SheetTrigger>
  <SheetContent side="left">
    <nav className="flex flex-col space-y-4">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </SheetContent>
</Sheet>

Accessibility

• Full keyboard support
• Screen reader accessible
• Focus management
• Escape key closes sheet
• Click outside closes sheet

Styling

Uses DarkSnow UI design tokens for consistent theming.

Related Components

• Dialog - Modal dialogs
• Drawer - Bottom sheets