Component catalog
Find components by purpose, with API references, examples, and accessibility guidance.
Find components by purpose, with API references, examples, and accessibility guidance.
Reusable navigation sidebar with one selection, independent of Fumadocs and routing libraries.
import { Sidebar } from "@liquidify/react/sidebar"| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | undefined | Navigation content and optional direct Header/Footer children. |
| className | string | undefined | Not specified | Additional CSS class for the glass surface. Use it to override `--lq-*` tokens in a stylesheet. |
| defaultValue | string | null | undefined | null | Initial uncontrolled selection. |
| dir | "auto" | "ltr" | "rtl" | undefined | undefined | Text direction, inherited from the host by default. |
| id | string | undefined | undefined | Native root id. |
| onChange | ((value: string | null) => void) | undefined | undefined | Requests the next selection in either mode. Unchanged selections do not emit callbacks. |
| ref | Ref<HTMLElement> | 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`. |
| tint | LiquidTintValue | undefined | Not specified | System accent from the 13-color LIQUID_COLORS palette. Changes tint, focus, and selection colors independently of the visual variant. |
| value | string | null | undefined | undefined | Controlled selected identity. null explicitly means no selection. |