Sidebar

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSidebarExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSidebarExample/></NativeScope>}

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. The Helios AI Chat template includes this layout with local repository navigation and plan-preview actions.

Create a local agent

Close dialog

Cloud engineer

Name

Label

DescriptionHelps with server architecture, cloud infrastructure and practical deployment planning.

Language

Auto-detect

 Auto-detectEnglishTurkishSpanishFrenchGermanJapanesePortugueseHindiTamilKannadaMarathi

Notifications

Show a notice when a reply is ready.

Voice

System voice

 OffSystem voice

Playback speed

0.75×1×1.25×1.5×

Preferences stay in this local preview. No agent or voice service is connected.

Navigation preview uses fictional local repositories.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="sidebar" id="ai-chat-variant"/>}

Composition

The sidebar composes several smaller components - avatar, badge, kbd, announcement, and the chevron glyphs - plus its own team and user menus. The React source package includes the complete dependency chain; swap the nav items and menus with your own routes and data.