How do I install the Vibe UI Sheet component?

You can install Sheet into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add sheet" in your terminal.

Does Vibe UI Sheet support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Sheet component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Sheet

An extensible drawer component that slides out from any edge of the viewport, supporting multiple design themes.

Sheet

An extensible drawer component that slides out from any edge of the viewport, supporting multiple design themes.

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

Edge Alignments

You can trigger the Sheet to slide from top, bottom, left, or right by setting the side prop on the content wrapper.

Visual Themes

Showcases the custom design variants (default, glass, retro, glow) integrated directly into the Sheet.

API Reference

Prop	Type	Default	Description
side	'top' \| 'right' \| 'bottom' \| 'left'	'right'	The edge of the viewport from which the sheet content slides in.
variant	'default' \| 'glass' \| 'retro' \| 'glow'	'default'	The visual theme styling variant applied to the sheet panel.
showCloseButton	boolean	true	Determines whether to show the close cross icon in the top-right corner.