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.
Wrap a related cluster of content behind one titled glass card, so a screen reads as distinct sections that let the backdrop lens through the surface — Apple's Liquid Glass container, as opposed to GroupBox's opaque grouped-background card.
import { Panel } from "@liquidify/react/panel"| Prop | Type | Default | Description |
|---|---|---|---|
| children required | ReactNode | — | The grouped content (`{ … }` content closure, children role: `content`) — content-agnostic: hosts `LabeledContent` rows, a `Toggle`, a `ProgressIndicator`, or a nested `Panel`/`GroupBox`. |
| 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. |
| id | string | undefined | — | Optional id forwarded verbatim to the `role="group"` glass root, so a consumer can target the surface from its own `aria-*` wiring. Panel's internal label id is generated separately and never collides with it. |
| label | ReactNode | — | The card's title (`GlassPanel(label:)` / SwiftUI `GroupBox(_:content:)`). A `string` routes through the `TextLabel` guard into an internal `Text` (`variant="headline"`, `weight="semibold"`, `color="secondary"` by default, overridable per-instance via `labelProps`) carrying the id the root's `aria-labelledby` targets. A `ReactNode` (e.g. an icon+text composite) passes through unwrapped so the caller keeps ownership of its own typography and icon (`labelProps` has no effect on this shape). Omitted, or supplied as a non-renderable value (`false` / `null` / `true` / `""`), renders no label region and no `aria-labelledby` — an intentionally unnamed group. |
| labelProps | LabelProps | undefined | — | Per-instance typography override for a `string` `label` (ADR-0028, charter §2) — spread last onto the internal `Text` so an explicit value wins over the `headline`/`semibold`/`secondary` default. No effect when `label` is a `ReactNode` (passes through `TextLabel` unwrapped) or omitted/non-renderable. |
| 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. |
| 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`. |
Panel preserves the semantics of its content and should be given a clear accessible label when its visible content does not provide one.
| Name | Value |
|---|---|
| --lq-color-label-secondary | Component-defined value |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-panel-label-gap | var(--lq-space-12) |
| --lq-panel-pad | var(--lq-space-16) |
| --lq-panel-track-h | Component-defined value |
| --lq-radius-22 | 1.375rem |
| --lq-radius-24 | Component-defined value |
| --lq-space- | 0.0625rem0.125rem0.25rem0.5rem0.75rem1rem1.25rem1.5rem2rem2.5rem3rem3.5rem |