Component catalog
Find components by purpose, with API references, examples, and accessibility guidance.
Find components by purpose, with API references, examples, and accessibility guidance.
Places React content into reusable bar slots.
import { BarLayout } from "@liquidify/react/bar-layout"| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | undefined | Not specified | Multiple owned elements cannot merge onto a single child. |
| center | LayoutSlot | Not specified | |
| className | string | undefined | Not specified | Additional CSS class for the glass surface. Use it to override `--lq-*` tokens in a stylesheet. |
| end | LayoutSlot | Not specified | |
| gap | LayoutSpacing | undefined | Not specified | Space between slots and controls. Defaults to compact (8px). |
| ref | Ref<HTMLDivElement> | undefined | Not specified | Ref to the rendered root or merged child. Its generic element type follows the component’s polymorphic root and defaults to `HTMLElement`. |
| shouldGrow | boolean | undefined | Not specified | Fills available space between side regions. Defaults to `false`. |
| shouldShrink | boolean | undefined | Not specified | Allows the middle region to shrink below its intrinsic width. Defaults to `true`. |
| sidebar | LayoutSlot | Not specified | Optional full-width content below the bar. |
| start | LayoutSlot | Not specified | |
| visualDebug | boolean | undefined | Not specified | Outlines this element and its descendants without changing layout. |