Sheet

The Sheet component provides a slide-out panel that overlays the page content. It's commonly used for navigation menus, settings panels, filters, or detailed views in mobile-first designs.

Sheet uses Dialog primitives internally, supporting the same accessibility features.

Features

Four positioning options (top, right, bottom, left)
Smooth slide animations
Overlay background for focus
Fixed header and footer with scrollable content
Built-in close button
Icon support in title
Accessible keyboard navigation

Usage

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from '@loke/design-system/sheet';

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Sheet Title</SheetTitle>
          <SheetDescription>
            Sheet description goes here.
          </SheetDescription>
        </SheetHeader>
        <div className="p-6">
          {/* Sheet content */}
        </div>
      </SheetContent>
    </Sheet>
  );
}

Tips:

Use side prop to control sheet position.
SheetHeader and SheetFooter are sticky during scroll.
Use for secondary content that doesn't need to always be visible.

Props

Sheet

The Sheet component accepts all Dialog props.

Prop

Type

SheetContent

Prop

Type

SheetTitle

Prop

Type

Examples

Basic sheet

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here.
      </SheetDescription>
    </SheetHeader>
    <div className="grid gap-4 p-6">
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" defaultValue="John Doe" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="username">Username</Label>
        <Input id="username" defaultValue="@johndoe" />
      </div>
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Different sides

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

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Top</Button>
  </SheetTrigger>
  <SheetContent side="top">
    <SheetHeader>
      <SheetTitle>Top Sheet</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Bottom</Button>
  </SheetTrigger>
  <SheetContent side="bottom">
    <SheetHeader>
      <SheetTitle>Bottom Sheet</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>

With form

<Sheet>
  <SheetTrigger asChild>
    <Button>New Item</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle icon={Settings}>Settings</SheetTitle>
      <SheetDescription>
        Configure your preferences.
      </SheetDescription>
    </SheetHeader>
    <form className="grid gap-4 p-6">
      <div className="grid gap-2">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="you@example.com" />
      </div>
      <div className="flex items-center space-x-2">
        <Switch id="notifications" />
        <Label htmlFor="notifications">Enable notifications</Label>
      </div>
    </form>
    <SheetFooter>
      <Button type="submit">Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

With scrollable content

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">View Details</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Terms of Service</SheetTitle>
      <SheetDescription>
        Please read carefully.
      </SheetDescription>
    </SheetHeader>
    <div className="p-6">
      {/* Long scrollable content */}
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Cancel</Button>
      </SheetClose>
      <Button>Accept</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Accessibility

Uses Dialog ARIA patterns (role="dialog").
Focus is trapped within the sheet when open.
Escape key closes the sheet.
Screen reader announces sheet title and description.
Close button has accessible label.
Returns focus to trigger on close.

Best practices

Use sheets for secondary content that doesn't need to be always visible.
Choose the appropriate side based on content type (right for details, left for navigation).
Keep sheet content focused on a single task or topic.
Use SheetHeader and SheetFooter for consistent structure.
Provide a clear way to close the sheet (close button or cancel action).
Consider mobile usability—bottom sheets work well on touch devices.
Use the icon prop in SheetTitle for visual context.

Sheet

On this page