Sheet
Extends the Dialog component to display content that complements the main screen, sliding in smoothly from top, bottom, left, or right screen edges.
Preview
Installation
pnpm dlx vibe-ui-kit@latest add sheet button
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button
Variations
Side Directions
Glassmorphic Backdrop
Neubrutalism Retro
Neon Glow Accent
Component Concept
Vibe UI's Sheet component is built on Radix Dialog primitives, enabling accessible slide-over drawers with smooth cubic-bezier physics curves (cubic-bezier(0.32, 0.72, 0, 1)), direction controls (top, bottom, left, right), and themed backdrop blurs.
Slide-Over Animations
- Right & Left: Smoothly slides horizontally from screen edges for sidebars and navigation drawers.
- Top & Bottom: Smoothly slides vertically for notifications, bottom sheets, and action drawers.
Accessibility
Handles focus trapping, screen reader announcements (SheetTitle, SheetDescription), and ESC key dismissals out of the box.
Contributors
JS
Jenish Sabhadiya