Component catalog

Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.

BarLayout

Place opaque React content into reusable bar slots.

import { BarLayout } from "@liquidify/react/bar-layout"

API

Prop	Type	Default	Description
asChild	undefined	—	Multiple owned elements cannot be merged onto one child.
center	LayoutSlot	—
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.
end	LayoutSlot	—
gap	LayoutSpacing \| undefined	—	Space between slots and their controls. Defaults to compact (8px).
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`.
shouldGrow	boolean \| undefined	—	Fill the available space between the occupied side regions. Defaults to false.
shouldShrink	boolean \| undefined	—	Allow the middle region to contract below its intrinsic width. Defaults to true.
sidebar	LayoutSlot	—	Optional content below the bar, spanning its width.
start	LayoutSlot	—
visualDebug	boolean \| undefined	—	Outline this element and its descendants without affecting layout.