🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Sheet

A panel that slides in from the edge of the screen.

Sheets (also called slide-outs or side panels) are overlay components that slide in from the edge of the screen to display additional content, forms, or navigation without leaving the current page. Unlike dialogs which appear in the center, sheets are anchored to a screen edge (top, bottom, left, or right) and are ideal for navigation menus, filters, settings panels, or detailed information that needs more space than a popover but shouldn't interrupt the main workflow like a modal dialog.

Built on top of Radix UI's Dialog primitive with smooth slide-in animations, focus trapping, scroll locking, and full accessibility support including proper ARIA attributes and keyboard navigation (Escape to close).

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@strongtie/design-system/sheet"

export function SheetDefault() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;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>
  )
}

Installation


npm install @strongtie/design-system

import { Sheet } from "@strongtie/design-system/sheet"

Components

This module exports the following components:

Sheet
SheetPortal
SheetOverlay
SheetTrigger
SheetClose
SheetContent
SheetHeader
SheetFooter
SheetTitle
SheetDescription

Props

`<SheetContent>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "start" \| "end" \| null`	`end`

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@strongtie/design-system/sheet"

export function SheetDefault() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Base Class

sheet

Variants

side (default: end)

Value	Classes
`top`	`-top`
`bottom`	`-bottom`
`start`	`-start`
`end`	`-end`

Component Slots

The following data attributes are used to identify component parts:

sheet
sheet-close
sheet-content
sheet-description
sheet-footer
sheet-header
sheet-overlay
sheet-portal
sheet-title
sheet-trigger

Additional Classes

Other CSS classes used by this component:

-ghost
-icon
sheet-close-button
sheet-close-icon
sheet-description
sheet-footer
sheet-header
sheet-overlay
sheet-title

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI dialog Documentation

Separator Sidebar

On This Page

Example Installation Components Props <SheetContent>Example Styling Base Class Variants Component Slots Additional Classes Accessibility Resources

Contribute

Sheet

A panel that slides in from the edge of the screen.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@strongtie/design-system/sheet"

export function SheetDefault() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;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>
  )
}

Installation


npm install @strongtie/design-system

import { Sheet } from "@strongtie/design-system/sheet"

Components

This module exports the following components:

Sheet
SheetPortal
SheetOverlay
SheetTrigger
SheetClose
SheetContent
SheetHeader
SheetFooter
SheetTitle
SheetDescription

Props

`<SheetContent>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "start" \| "end" \| null`	`end`

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@strongtie/design-system/sheet"

export function SheetDefault() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Base Class

sheet

Variants

side (default: end)

Value	Classes
`top`	`-top`
`bottom`	`-bottom`
`start`	`-start`
`end`	`-end`

Component Slots

The following data attributes are used to identify component parts:

sheet
sheet-close
sheet-content
sheet-description
sheet-footer
sheet-header
sheet-overlay
sheet-portal
sheet-title
sheet-trigger

Additional Classes

Other CSS classes used by this component:

-ghost
-icon
sheet-close-button
sheet-close-icon
sheet-description
sheet-footer
sheet-header
sheet-overlay
sheet-title

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI dialog Documentation

Separator Sidebar

On This Page

Example Installation Components Props <SheetContent>Example Styling Base Class Variants Component Slots Additional Classes Accessibility Resources

Contribute