Sheet
Sheet is a compound component that provides sheet functionality.
Active
Sheet Preview
This is how a sheet would appear
Examples
side
Different side options for the Sheet component.
top
Sheet Preview
This is how a sheet would appear
bottom
Sheet Preview
This is how a sheet would appear
left
Sheet Preview
This is how a sheet would appear
right
Sheet Preview
This is how a sheet would appear
Installation
npm install @your-design-system/sheetimport { Sheet } from "@/components/ui/sheet"
export function SheetDemo() {
return (
<Sheet side="right">
{/* Content */}
</Sheet>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
side | enum | right | The side prop for the component. Options: top | right | bottom | left |
title | string | - | The title prop for the component. |
description | string | - | The description prop for the component. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
fixedz-50gap-4bg-backgroundp-6shadow-lgtransitionease-in-outside Variants
top
inset-x-0top-0border-bbottom
inset-x-0bottom-0border-tleft
inset-y-0left-0h-fullw-3/4border-rsm:max-w-smright
inset-y-0right-0h-fullw-3/4border-lsm:max-w-smDesign System Compliance
This component is validated against atomic design principles and foundation token usage.
⚠ Atomic Design Issues
Issue 1Hardcoded spacing found: gap-4, p-6, top-0, bottom-0. Use semantic spacing tokens.
Fix these issues to ensure your component integrates properly with the design system.
On This Page