Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
A modal surface presented from the bottom edge of the viewport that the consumer fills with arbitrary content.
import { Sheet } from "@liquidify/react/sheet"| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The sheet content — rendered inside the glass card (charter §8 slot role: content). |
| className | string | undefined | — | Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean. |
| cornerRadius | SheetCornerRadius | undefined | 22 | Top corner radius of the card, as a `--lq-radius-*` token key — SwiftUI `.presentationCornerRadius`. |
| defaultOpen | boolean | undefined | — | Uncontrolled seed for the open state (default `false`). |
| detents | readonly SheetDetent[] | undefined | ["large"] | Available resting heights (SwiftUI `.presentationDetents`). The sheet opens at the FIRST detent; dragging the top handle snaps between detents, and dragging past the smallest one dismisses the sheet (when `dismissible`). |
| dismissible | boolean | undefined | — | Whether Escape, a scrim tap, and a drag past the smallest detent dismiss the sheet (`interactiveDismissDisabled`, inverse polarity). Escape / scrim are forwarded to Overlay; drag-dismiss is gated here. Defaults to `true`. |
| dragIndicator | SheetDragIndicator | undefined | visible | Whether the drag indicator (grabber) is shown — SwiftUI `.presentationDragIndicator`. The pan region (the top edge) stays draggable either way; only the grabber pill toggles. |
| material | "frosted" | "regular" | "clear" | undefined | enclosing `<Material default>`, else `"regular"` | Material of the glass surface — `frosted · regular · clear` (§06). Forwarded to the engine, which resolves the chain `prop ?? <Material default> ?? "regular"`, so a bare surface inherits the enclosing provider default. |
| onOpenChange | ((open: boolean) => void) | undefined | — | Fires with the next open state on every close path (Escape, scrim tap, drag past the smallest detent). |
| open | boolean | undefined | — | Controlled open state. Passing it switches Sheet to controlled mode. |
| perf | "low" | "high" | undefined | derived from `<Backdrop type>`, else `"low"` | Perf budget of the glass surface (ADR-0006/0007). Forwarded to the engine as `data-glass-perf`; `"high"` opts this surface into the edge-lensing filter. When omitted, derives from the enclosing `<Backdrop type>` (§04). |
| ref | Ref<HTMLDivElement> | undefined | — | Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`. |
Sheet supports the documented keyboard interactions below.
| Name | Value |
|---|---|
| --lq-color-label-tertiary-light | rgba(60, 60, 67, 0.3) |
| --lq-duration- | 0ms80ms120ms150ms250ms350ms500ms |
| --lq-duration-standard | 250ms |
| --lq-easing- | cubic-bezier(0.25, 0.1, 0.25, 1)cubic-bezier(0, 0, 0.2, 1)cubic-bezier(0.4, 0, 1, 1)cubic-bezier(0.175, 0.885, 0.32, 1.275)cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| --lq-easing-standard | cubic-bezier(0.25, 0.1, 0.25, 1) |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-radius-10 | 0.625rem |
| --lq-radius-14 | 0.875rem |
| --lq-radius-22 | 1.375rem |
| --lq-radius-pill | 9999rem |
| --lq-sheet-corner | var(--lq-radius-10)var(--lq-radius-14)var(--lq-radius-22) |
| --lq-sheet-height | Resolved by the active Liquidify theme |
| --lq-space-16 | 1rem |
| --lq-space-20 | 1.25rem |
| --lq-space-4 | 0.25rem |
| --lq-space-40 | 2.5rem |