Tabs

• Layer: Component
• Base: @ark-ui/solid Tabs + Park UI tabs recipe

Horizontal tab bar with a sliding underline indicator. The line variant is the default — minimal, most common. The recipe provides slot class names; triggers require inline horizontal padding because the recipe’s CSS classes may not be emitted in the bundle (see Inline Style Requirements below).

Line Variant

A — UNDERLINE (minimal, most common)

FirstSecondThird

Content for First tab

Content for Second tab

Content for Third tab

Settings Pattern

4-tab layout (used in Settings page)

BackupSecurityAI IntegrationMCP CLI

Backup targets and schedule

Password change form

AI CLI command configuration

MCP server install

Usage

import { Tabs } from '@ark-ui/solid/tabs'
import { tabs } from '@risingswamp/design-system/styled-system/recipes'

const slots = tabs({ variant: 'line', size: 'sm' })

<Tabs.Root defaultValue="first" class={slots.root}>
  <Tabs.List class={slots.list} style={{
    'border-bottom': '1px solid var(--colors-border)',
    gap: '8px',
  }}>
    <Tabs.Trigger value="first" class={slots.trigger} style={{
      'font-size': '12px',
      'font-family': 'var(--fonts-sans)',
      'letter-spacing': '0.05em',
      'text-transform': 'uppercase',
      background: 'transparent',
      border: 'none',
      cursor: 'pointer',
      padding: '0 10px 8px 0',   // first tab: no left pad
    }}>First</Tabs.Trigger>
    <Tabs.Trigger value="second" class={slots.trigger} style={{
      /* same base styles */
      padding: '0 10px 8px 10px', // middle tabs: full horizontal pad
    }}>Second</Tabs.Trigger>
    <Tabs.Trigger value="last" class={slots.trigger} style={{
      /* same base styles */
      padding: '0 0 8px 10px',    // last tab: no right pad
    }}>Last</Tabs.Trigger>
    <Tabs.Indicator class={slots.indicator} />
  </Tabs.List>
  <Tabs.Content value="first" class={slots.content}>…</Tabs.Content>
  <Tabs.Content value="second" class={slots.content}>…</Tabs.Content>
  <Tabs.Content value="last" class={slots.content}>…</Tabs.Content>
</Tabs.Root>

Variants

Variant	Description
line	Underline indicator only — minimal, default
enclosed	Bordered tabs with contained panel
outline	Outlined triggers, no filled panel

Sizes

Size	Trigger height	Font size
sm	32px	12px
md	40px	14px (default)
lg	48px	16px

Inline Style Requirements

The Park UI tabs recipe defines px: '2.5' (10px) horizontal padding on triggers via compound variants, but these CSS classes may not be emitted in the generated stylesheet bundle. Always supplement with inline horizontal padding on triggers:

Position	Padding value
First trigger	padding: '0 10px 8px 0' (no left pad)
Middle triggers	padding: '0 10px 8px 10px'
Last trigger	padding: '0 0 8px 10px' (no right pad)

The gap: '8px' on Tabs.List also needs to be set inline.

Accessibility

• Each Tabs.Trigger gets role="tab" and aria-selected via Ark UI
• Tabs.Content gets role="tabpanel" and aria-labelledby automatically
• Arrow keys navigate between tabs; Enter/Space activates
• Tabs.Indicator is aria-hidden and purely visual

Token Dependencies

Token	Usage
--colors-border	List bottom border, list gap colour
--colors-fg	Active trigger text
--colors-text-muted	Inactive trigger text
--colors-accent	Indicator bar colour
--fonts-sans	Trigger label font