Source

Command Palette

Search for a command to run...

Sheet

Displays a sliding panel with smooth animations and accessibility features.

About Sheet

A sliding panel component for displaying additional content or actions that appears over the main interface. Supports positioning from top, bottom, left, or right sides with smooth slide-in animations.

Installation

Import the Sheet component from LSD:
import { Sheet } from '@nipsys/lsd'

export default function MyComponent() {
  return <Sheet />
}

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
All Sides

Features

Additional features and capabilities of the component.
Close Button

Controlled

Composition

Sheet
├── SheetTrigger
└── SheetPortal
├── SheetOverlay
├── SheetContent
├── SheetHeader
└── SheetFooter

API Reference

Radix UI Documentation
Sheet wraps Radix UI primitives
View Radix UI Sheet documentation →

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate within the sheet• Shift + Tab - Navigate to previous element• Escape - Close the sheet• Focus is trapped within the sheet when open
ARIA Attributes
Proper ARIA attributes for screen readers
• role="dialog" - Identifies the content as a dialog• aria-modal="true" - Indicates modal behavior• aria-labelledby - Links to the sheet title• aria-describedby - Links to the sheet description
Focus States
Visible focus indicators for keyboard users
• Focus is automatically trapped inside the sheet when it opens and returns to the trigger when closed.
Tooltip