Components
Sheet
A customizable and accessible sheet component for sliding panels.
Introduction
The Sheet component provides a sliding panel for side menus, modals, and more. It’s built on Radix Dialog and is fully customizable for various use cases.
Example: Single Button Sheet
Installation
Install the sheet component:
Example: Multi-Button Sheet (Top, Left, Bottom, Right)
File Structure
Prop Types
| Prop | Type | Default |
|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" |
className | string | - |
children | ReactNode | - |
Features
- Slide-in Panels:
- Configure sheets to slide in from any side of the screen.
- Customizable Content:
- Add headers, footers, or other components to the sheet.
- Accessibility:
- Built on Radix Dialog for accessibility out of the box.
Accessibility
- Keyboard Support:
- Fully navigable with keyboard controls.
- ARIA Attributes:
- Implements
aria-labelledby,aria-describedby, and other roles for accessibility.
- Implements
- Screen Reader Support:
- Compatible with assistive technologies.
Conclusion
The Sheet component is ideal for creating accessible sliding panels for menus, modals, or sidebars. Its flexibility and customization options make it perfect for various use cases.