Sheet

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Sheet component is a sliding panel that appears from the edges of the screen. Built on Radix UI, it provides smooth animations, accessibility features, and flexible positioning. Perfect for navigation menus, forms, settings panels, and any content that needs additional space without leaving the current page.

Basic Usage

View in Storybook

Different Sides

Navigation Menu

Form Sheet

Settings Panel

Controlled Sheet

Sheet is currently: Closed

Properties

Sheet

Property	Type	Default	Description
defaultOpen	boolean	false	The default open state for uncontrolled usage.
open	boolean	-	The controlled open state of the sheet.
onOpenChange	(open: boolean) => void	-	Callback when the open state changes.

SheetTrigger

Property	Type	Default	Description
asChild	boolean	false	Render as child element instead of button.
children	ReactNode	-	Trigger element content.

SheetContent

Property	Type	Default	Description
side	"top" | "right" | "bottom" | "left"	"right"	Side of the screen where the sheet appears.
className	string	-	Additional CSS classes.
children	ReactNode	-	Sheet content.

SheetHeader

Property	Type	Description
className	string	Additional CSS classes for the header.
children	ReactNode	Header content (title, description).

SheetTitle

Property	Type	Description
className	string	Additional CSS classes for the title.
children	ReactNode	Title text.

SheetDescription

Property	Type	Description
className	string	Additional CSS classes for the description.
children	ReactNode	Description text.

SheetFooter

Property	Type	Description
className	string	Additional CSS classes for the footer.
children	ReactNode	Footer content (buttons, actions).

Accessibility

The Sheet component includes comprehensive accessibility features:

• Keyboard Navigation - Escape key to close, Tab navigation within sheet
• Focus Management - Automatic focus trapping and restoration
• Screen Reader Support - Proper ARIA attributes and announcements
• Portal Rendering - Renders in document body to avoid z-index issues
• Overlay Interaction - Click outside to close (can be disabled)

Common Use Cases

The Sheet component is perfect for:

• Navigation Menus - Mobile-friendly navigation and menu systems
• Forms & Wizards - Multi-step forms and data entry workflows
• Settings Panels - Application preferences and configuration
• Content Details - Additional information without page navigation
• Shopping Carts - E-commerce cart and checkout flows
• User Profiles - Profile editing and account management
• Filters & Search - Advanced filtering and search interfaces

Best Practices

1. Appropriate Side - Choose the side that makes sense for your layout and content
2. Clear Purpose - Use descriptive titles and descriptions
3. Proper Width - Set appropriate width for content, especially on larger screens
4. Mobile First - Design sheets with mobile experience in mind
5. Focus Management - Ensure proper focus handling for accessibility
6. Content Organization - Use headers and footers to organize content clearly
7. Performance - Avoid heavy content that might cause layout shifts
8. Consistent Behavior - Maintain consistent sheet behavior across your application