Navigation

Tabs

Themed tab strip with default and pill variants and manual or automatic activation.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjTabsComponent } from '@kouji-ui/components';
04

Playground

#playground
High-level summary of what this surface does.
tabs
active
variant
activation
<kj-tabs
  [value]="'overview'"
>
  <kj-tab-list>
    <kj-tab value="overview">Overview</kj-tab>
    <kj-tab value="api">API</kj-tab>
    <kj-tab value="examples">Examples</kj-tab>
  </kj-tab-list>
  <kj-tab-panel value="overview">High-level summary of what this surface does.</kj-tab-panel>
  <kj-tab-panel value="api">Inputs, outputs, and accepted value shapes.</kj-tab-panel>
  <kj-tab-panel value="examples">Copy-pasteable patterns for common scenarios.</kj-tab-panel>
</kj-tabs>