Components / Window Sheet
Window Sheet
The resizable inspector panel anchored to the right edge: post inspectors, editors, settings panels that live beside the page instead of over its center. Drag the left edge to resize.
import { WindowSheet, WindowSheetBody, WindowSheetContent, WindowSheetDescription, WindowSheetFooter, WindowSheetHeader, WindowSheetSection, WindowSheetTitle } from '@layers/ui/window-sheet'Rendered stock
House rules
- Resizing is built in: defaultWidth (520), minWidth (400), and maxWidth (90% of the viewport by default) live on WindowSheetContent.
- There is no exported trigger; control it with open/onOpenChange on the root.
- WindowSheetTitle is required for accessibility; give it className="sr-only" when the header carries the visible title.
- WindowSheetHeader children are the left side; the actions prop is the right-side control group. showCloseButton on Content adds the corner X.
- WindowSheetBody is the scrollable region; WindowSheetSection provides the p-6 padding, with variant="secondary" for tinted regions. Never pad the body directly.
- Never use stock Sheet; canvas detail views stack as CanvasSheets instead.