Tabs

The Tabs component switches between related content panels. It is built on Ark UI tabs, sourced from Shark UI, sharing the tabsListVariants/tabsIndicatorVariants cva + part classes from @cloudvoyant/helical-ui. Use the framework selector in the top-right to switch between implementations.

Profile content

// apps/docs/src/components/examples/tabs/default/react.tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@cloudvoyant/helical-react';

export default function ReactTabsDefault() {
  return (
    <Tabs defaultValue="profile">
      <TabsList>
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
      </TabsList>
      <TabsContent value="profile">Profile content</TabsContent>
      <TabsContent value="settings">Settings content</TabsContent>
      <TabsContent value="security">Security content</TabsContent>
    </Tabs>
  );
}

<!-- apps/docs/src/components/examples/tabs/default/svelte.svelte -->
<script lang="ts">
  import { Tabs, TabsList, TabsTrigger, TabsContent } from '@cloudvoyant/helical-svelte';
</script>

<Tabs defaultValue="profile">
  <TabsList>
    <TabsTrigger value="profile">Profile</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
  </TabsList>
  <TabsContent value="profile">Profile content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
  <TabsContent value="security">Security content</TabsContent>
</Tabs>

Examples

Underline

Account content

// apps/docs/src/components/examples/tabs/underline/react.tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@cloudvoyant/helical-react';

export default function ReactTabsUnderline() {
  return (
    <Tabs defaultValue="account">
      <TabsList variant="underline">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account content</TabsContent>
      <TabsContent value="billing">Billing content</TabsContent>
    </Tabs>
  );
}

<!-- apps/docs/src/components/examples/tabs/underline/svelte.svelte -->
<script lang="ts">
  import { Tabs, TabsList, TabsTrigger, TabsContent } from '@cloudvoyant/helical-svelte';
</script>

<Tabs defaultValue="account">
  <TabsList variant="underline">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account content</TabsContent>
  <TabsContent value="billing">Billing content</TabsContent>
</Tabs>

API Reference

Tabs

Props

Accepts all Ark TabsRoot props plus className/class. Defaults lazyMount and unmountOnExit to true.

TabsList

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'underline'`	`'default'`	Pill (default) or underline indicator style.

Also accepts all Ark TabList props. Renders the Ark TabIndicator inside the list.

TabsTrigger

Props

Accepts all Ark TabTrigger props. value is required and must match a TabsContent panel; disabled prevents selection.

TabsContent

Props

Accepts all Ark TabContent props. value is required and must match a TabsTrigger.

useTabs

Returns Ark’s tabs context — value, focusedValue, setValue, selectNext, selectPrev, and friends — for programmatic control.

Accessibility

Follows the Tabs WAI-ARIA pattern. Ark sets role="tablist"/role="tab"/role="tabpanel", aria-selected, and aria-controls; arrow keys rove between triggers and Tab moves focus to the active panel.

Theming

No theme extension is required — the indicator and hover states use existing tokens (bg-accent, bg-primary, text-muted-foreground, --radius-*), light and dark.