Sheet

A panel that slides out from the edge of the screen, useful for displaying additional content or forms.

Usage

import { Sheet } from "@rhinolabs/ui"

export default function SheetDemo() {
  return (
    <Sheet>
      <Sheet.Trigger>Open Sheet</Sheet.Trigger>
      <Sheet.Content>
        <Sheet.Header>
          <Sheet.Title>Edit Profile</Sheet.Title>
          <Sheet.Description>
            Make changes to your profile here.
          </Sheet.Description>
        </Sheet.Header>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="name">Name</label>
            <input id="name" className="col-span-3" />
          </div>
        </div>
        <Sheet.Footer>
          <Button type="submit">Save changes</Button>
        </Sheet.Footer>
      </Sheet.Content>
    </Sheet>
  )
}

Examples

Side Variants

Sheet panels can slide in from different sides.

<div className="grid grid-cols-2 gap-2">
  <Sheet>
    <Sheet.Trigger asChild>
      <Button variant="outline">Left Sheet</Button>
    </Sheet.Trigger>
    <Sheet.Content side="left">
      <Sheet.Header>
        <Sheet.Title>Left Panel</Sheet.Title>
        <Sheet.Description>
          This panel slides in from the left.
        </Sheet.Description>
      </Sheet.Header>
    </Sheet.Content>
  </Sheet>
  <Sheet>
    <Sheet.Trigger asChild>
      <Button variant="outline">Top Sheet</Button>
    </Sheet.Trigger>
    <Sheet.Content side="top">
      <Sheet.Header>
        <Sheet.Title>Top Panel</Sheet.Title>
        <Sheet.Description>
          This panel slides in from the top.
        </Sheet.Description>
      </Sheet.Header>
    </Sheet.Content>
  </Sheet>
</div>

With Form

Sheet containing a form.

<Sheet>
  <Sheet.Trigger asChild>
    <Button>Edit Settings</Button>
  </Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title>Settings</Sheet.Title>
      <Sheet.Description>
        Configure your preferences.
      </Sheet.Description>
    </Sheet.Header>
    <form className="grid gap-4 py-4">
      <div className="grid grid-cols-4 items-center gap-4">
        <label htmlFor="theme">Theme</label>
        <select id="theme" className="col-span-3">
          <option>Light</option>
          <option>Dark</option>
        </select>
      </div>
      <div className="grid grid-cols-4 items-center gap-4">
        <label htmlFor="email">Email</label>
        <input id="email" type="email" className="col-span-3" />
      </div>
    </form>
    <Sheet.Footer>
      <Button type="submit">Save changes</Button>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet>

Props

SheetContent

Prop	Type	Default	Description
side	"top" | "right" | "bottom" | "left"	"right"	Side the sheet appears from
onOpenAutoFocus	(event: Event) => void	-	Focus event handler when sheet opens
onCloseAutoFocus	(event: Event) => void	-	Focus event handler when sheet closes

All components accept their respective Radix UI Dialog primitive props.

Design Considerations

• Choose appropriate side
• Maintain content hierarchy
• Consider mobile viewports
• Handle form submissions
• Provide clear actions

Accessibility

• Manages focus states
• Supports keyboard navigation
• Provides ARIA labels
• Handles escape key
• Traps focus within sheet