Sidebar
A composable, themeable and customisable sidebar component.
A sidebar is a page shell: it is position: fixed and sized to the viewport,
so it cannot be rendered honestly inside a documentation column. This preview
runs the real thing in a frame — collapse it with the trigger, or open it full
size.
Installation
import { ... } from 'nooxit-design-system/components/sidebar';Notes
Nooxit sidebars are 240px wide expanded and 48px collapsed, narrower than
the 256px stock default. Menu items are 32px with a 4px radius; group labels use
the dedicated sidebar-foreground-70 token.
sidebar-primary and sidebar-primary-foreground are not Figma variables —
they were added so the logo tile has its own token, and they carry the same
values as primary and primary-foreground.
Source — src/components/sidebar.tsx
Figma — Sidebar in the Nooxit UI kit