npx shadcn@latest add https://elabs-ai.com/r/sidebar-02.jsonPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui registry block "Dashboard" (sidebar-02) to this project. A block is copied into the app and becomes my code. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Find it and what it is built from: `npx -y @elabs-ai/components-cli search sidebar-02`. 3. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), plus the packages the block imports. If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Copy the block in with `npx shadcn@latest add https://elabs-ai.com/r/sidebar-02.json`; if that url does not answer, copy its files from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks/sidebar-02 instead. Then adapt it here: [the screen or file, and the real data it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Dependencies
Examples
Revenue Dip
The same screen on a week that went the other way. Its only job is to prove the revenue headline reads the series: a falling week must say so, in its own words, rather than repeating whatever `Default` says.
Nested Route
A nested route lights its PARENT nav entry, and the root entry stays dark — the guard in `isPathActive` that stops `/` matching every route.
Frame
Chrome only: the frame with an empty content slot. The lock is the shell’s standards — a skip link, one `<main id="main-content">` focus target, the named primary nav and the command trigger — so a later refactor that quietly drops one fails here rather than in review.
Collapsed
The icon rail: labels clipped away, accessible names and sub-routes intact.
Narrow
A phone: the rail hands itself to a drawer, the content surface takes the whole width, and the page name survives beside the control cluster.
Loading
Nothing has arrived yet. Every region renders its own layout-shaped skeleton at the size the real content will occupy, announced once per region.
Empty
A first day, or a filter that matched nothing: each region answers for itself with a real empty state — a glyph, a title, one sentence and one way onward.
Overflowing Content
Narrow Rail Beside Inset Card
`detailsOverlayBreakpoint` raised above the `md` breakpoint the inset card's own gutter is gated on — the one configuration where the rail renders its NARROW strip while the content column is still a floating card. Both branches receive the shell's compensation class, and the two start from different padding, so a single value cannot serve both: the strip's own 12px would be replaced by the wide branch's 8px and its first icon would centre 12px above the top bar's. This locks the two centre lines together in that window.