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