Sheet
A Sheet component is a UI element that presents content in a sliding panel, often overlaying the main application interface. It is typically used for displaying additional information, forms, or actions without navigating away from the current view. Sheets can be swiped or tapped to expand or collapse, providing a clean and efficient way to manage user interactions and maintain focus on the main content.
# Demo
Basic Sheet Examples
Simple sheet components with different content types.
Sheet Sizes
Different sheet sizes for various content needs.
Settings Sheet
Sheet with form controls for application settings.
Profile Sheet
Sheet for editing user profile information.
Action Sheet
Sheet with action buttons for quick operations.
Sheet Best Practices
Guidelines for effective sheet implementation.
✅ Do
- • Use appropriate sizes for content
- • Provide clear titles and actions
- • Include cancel/close options
- • Use for forms and detailed views
- • Implement proper keyboard navigation
- • Show loading states when needed
- • Group related actions together
❌ Don't
- • Use for simple confirmations (use dialogs)
- • Make sheets too narrow for content
- • Forget to handle escape key
- • Stack multiple sheets
- • Use for critical system alerts
- • Ignore mobile responsiveness
- • Hide important actions
Sheet Activity Summary
Track all sheet interactions and actions.
Recent Sheet Actions
No sheet actions yet. Try opening some sheets above.
Current Sheet States
Basic Sheet:Closed
Settings Sheet:Closed
Profile Sheet:Closed
Action Sheet:Closed
Confirm Sheet:Closed
Total actions: 0
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| isOpen | boolean | Required | Controls whether the sheet is open. |
| title | string | Optional | Title for the sheet. |
| size | SheetSize | Optional | Size of the sheet. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| headerClassName | string | ' ' | You can customise by passing tailwind classes. |
| titleClassName | string | ' ' | You can customise by passing tailwind classes. |
| contentClassName | string | ' ' | You can customise by passing tailwind classes. |
| children | React.ReactNode | Required | Content for the sheet. |
| onCloseSheet | () => void | Optional | Callback when sheet is closed. |
| header | React.ReactNode | Optional | Custom header content. |
| footer | React.ReactNode | Optional | Optional footer content. |
| aria-label | string | Optional | ARIA label for accessibility. |
| aria-labelledby | string | Optional | ARIA labelledby for accessibility. |
| role | string | Optional | ARIA role for accessibility. |
# Tags