Fabrials UI

Loading state

Installation

Import the control from @fabrials/ui, after setting the app up.

TypeScript

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody } from "@fabrials/ui";

Or install it under shadcn's name, so code that imports @/components/ui/sheet gets this control. See shims.
```
npx shadcn@latest add @fabrials/sheet
```

API reference

Prop / export	Type	Description
`SheetContent side`	`left \| right \| start \| end`	Which edge the panel uses. left and right are physical; start and end are the inline start and end, the other edge when the page reads right to left.
`Sheet closeOnEscape`	`anywhere \| focus-inside`	anywhere (default) closes on Escape from anywhere in the document. focus-inside closes only when focus is inside the sheet, for a drawer that stays open beside the page; Escape from inside still returns focus to the trigger.
`SheetContent container / initialFocus / finalFocus`	`element \| ref \| null / Base UI`	container portals the sheet next to its trigger instead of the body (tab order: trigger, then sheet). initialFocus={false} leaves focus where it was when the sheet opens.
`--fui-sheet-inset-block-start / -end / --fui-sheet-z / --fui-sheet-width`	`CSS custom properties`	Set on SheetContent style or className, no !important. The block insets default to 0 (a drawer under a header sets the first), z to the overlay level plus one, width to 26rem (never wider than the window).
`Sheet modal`	`boolean \| trap-focus`	true (default): scrim, focus trap, inert page. false: a drawer beside the page, with no scrim and no trap; an outside press does not close it, Escape and the close control do. Base UI reads modal on the root, so it is set on Sheet and SheetContent follows.
`SheetContent padding / keepMounted`	`none / boolean`	padding=none for content that draws its own; keepMounted keeps it mounted while closed.

Behavior

Sheet is the dialog primitive anchored to an edge; modal by default it traps focus. A non-modal sheet is for tools that stay open while people work in the page.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.