Sheet

A panel that slides in from any edge.

Installation

import { Sheet } from "~/components/ui/Sheet";

<Sheet
  side="right"
  trigger={<Button>Open panel</Button>}
  title="Panel"
>
  ...
</Sheet>

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"right"	Edge the panel slides from.
trigger	ReactElement	-	Element that opens the sheet (uncontrolled use).
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Controlled open handler.
title	ReactNode	-	Panel title.
description	ReactNode	-	Optional supporting text.

Built on the Base UI Dialog primitive: focus trap, scroll lock, Escape to close, and aria wiring.
The global theme Drawer is this component with side=right.