Sidebar

The floating navigation panel from the dashboard template - 260px wide, radius/3xl, white hairline border and the sidebar elevation shadow. Composes the team menu, quick search with Kbd hint, nav items with badges, an announcement card, and the user menu.

Installation

You can add this sidebar block using our CLI or manually. The CLI also installs the avatar, badge, kbd, and announcement components it composes:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add sidebar

AI chat variant

The same floating panel tweaked for the AI Chat template: quick actions up top (New agent, Automations, Customize), a Repositories tree whose open repo lists recent chats with relative-time chips and a curved tree connector, and a plan card with an Upgrade button instead of the team menu. Ships with the AI Chat Pro template.

Composition

The sidebar composes several smaller registry items - avatar, badge, kbd, announcement, and the chevron glyphs - plus its own team and user menus. Installing it with the CLI pulls the whole chain automatically; swap the nav items and menus with your own routes and data.