Tabs

@/components/kamod-ui/tabs

Account

Make changes to your account here.

Name

Username

Installation

Install the package and import Tabs, TabsList, TabsTrigger and TabsContent from `@/components/kamod-ui/tabs`.

pnpm add @kamod-ch/ui

Usage

Tabs organize content into focusable views and support synchronized groups via the `syncKey` prop.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/kamod-ui/tabs";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="details">Details</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="details">Details content</TabsContent>
</Tabs>

Overview content

Synced Tabs

Use the syncKey prop to synchronize multiple groups with one shared state.

React is ideal for complex product UIs and large component ecosystems.

Rich libraries, broad hiring pool, and excellent long-term maintainability.

Disabled Triggers

Use the disabled prop on TabsTrigger to prevent a tab from being selected.

Your workspace is active and all automations are healthy.

Nested Tabs

Nest tabs inside content panels for layered, app-like navigation patterns.

Keep your public profile and company details in sync across products.

API Reference

Tabs component props and accepted values.

Tabs

Prop	Type	Default
defaultValue	`string`	`-`
syncKey	`string`	`-`
orientation	`"horizontal" \| "vertical"`	`"horizontal"`

Tabs List

Prop	Type	Default
variant	`"default" \| "line"`	`"default"`

Tabs Trigger

Prop	Type	Default
value	`string`	`required`
disabled	`boolean`	`false`

Tabs Content

Prop	Type	Default
value	`string`	`required`
forceMount	`boolean`	`false`

Accessibility Notes

Use Tabs with clear labels, keyboard-friendly interactions and semantic structure.