Sheet

@/components/kamod-ui/sheet

Installation

Import Sheet primitives from `@/components/kamod-ui/sheet`.

pnpm add @kamod-ch/ui

Usage

Use SheetTrigger to open and SheetContent with side="top" | "right" | "bottom" | "left". Left and right panels accept max-width utilities; top and bottom span the viewport width. Bottom/top padding includes safe-area insets for notched devices.

import { Sheet } from "@/components/kamod-ui/sheet";

<Sheet />

Basic

Open a Sheet and present focused context with title and description.

Side

Set side on SheetContent to top, right, bottom, or left. Top and bottom sheets span the full viewport width; use max-width classes only for left and right.

No Close Button

Disable the built-in close button with showCloseButton={false}.

API Reference

Props, slots and variants for this component.

Sheet

Sheet component props and accepted values.

Prop	Type	Default
defaultOpen	`boolean`	`false`
SheetContent side	`"left" \| "right" \| "top" \| "bottom"`	`"right"`
SheetContent showCloseButton	`boolean`	`true`
SheetContent forceMount	`boolean`	`false`

Accessibility Notes

Always provide a descriptive title/description and ensure users can close the sheet via keyboard or explicit actions.