Tabs

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,NativeTabsExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeTabsExample/></NativeScope>}

Pill tabs

PillTab is the fully-rounded sibling for switching local views rather than routed panels. It ships in two styles: blue (the default - the AI chat panel's Changes/Browser switcher) and the quieter gray, used for scope and filter rows like the settings Tools page. Both share the same idle and hover treatment; only the selected pill differs.

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