Sheet

A slide-in panel from any edge of the screen.

Install

npx shadcn add @clearly/sheet

Live Sheet component — see usage below.

import { Sheet } from "@/components/ui/sheet"

<Sheet />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Prop	Type	Default	Description
`open`	`boolean`	`—`	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	`—`	Open-state callback.
`side`	`"left" \| "right" \| "top" \| "bottom"`	`"right"`	Edge the panel slides from.
`glass`	`"Subtle" \| "Medium" \| "Strong"`	`"Medium"`	Glass depth of the panel.
`specular`	`boolean`	`true`	Directional specular highlight.
`radius`	`number`	`24`	Corner radius of the panel in px.
`showCloseButton`	`boolean`	`true`	Show the × close button.