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.
Adaptive shell with independently controlled bars and sidebar.
import { AdaptiveAppLayout } from "@liquidify/react/adaptive-app-layout"| Prop | Type | Default | Description |
|---|---|---|---|
| actions | LayoutSlot | — | |
| appName | string | undefined | — | |
| asChild | undefined | — | Multiple owned elements cannot be merged onto one child. |
| bottomBar | AdaptiveAppBarOptions | null | undefined | — | |
| children required | ReactNode | — | |
| 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. |
| compactNavigation | { label: string; icon?: ReactNode; } | undefined | — | |
| contentInset | "automatic" | "none" | undefined | — | Automatic content clearance, or caller-owned padding using the public inset tokens. |
| contentProps | DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined | — | |
| defaultSidebarOpen | boolean | undefined | — | |
| gap | LayoutSpacing | undefined | — | |
| leading | LayoutSlot | — | |
| navigation | LayoutSlot | — | |
| onPresentationChange | ((change: AdaptivePresentationChange) => void) | undefined | — | |
| onSidebarOpenChange | ((open: boolean, details: AdaptiveStateChange<boolean>) => void) | undefined | — | |
| 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`. |
| scrollBehavior | AdaptiveScrollBehavior | undefined | — | |
| separation | LayoutSpacing | undefined | — | |
| showCompactNavigation | boolean | undefined | — | |
| showSidebar | boolean | undefined | — | Defaults to whether navigation or sidebar content was supplied. |
| sidebar | LayoutSlot | — | |
| sidebarContentProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined | — | |
| sidebarFooter | LayoutSlot | — | |
| sidebarOpen | boolean | undefined | — | |
| sidebarProps | DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined | — | |
| sidebarTitle | string | undefined | — | |
| sidebarToggle | LayoutSlot | — | Undefined supplies the standard toggle; null omits it. |
| skipLinkLabel | string | undefined | — | |
| title | string | undefined | — | |
| topBar | AdaptiveAppBarOptions | null | undefined | — | Null omits the entire bar. Undefined uses default content. |
| visualDebug | boolean | undefined | — |