Zetta v0.10

Components · Navigation

Tabs

A segmented control on a muted track; the active tab lifts onto a card surface with a soft shadow. Switch tabs in the preview below — it works in every theme.

Preview

Light
Your workspace overview and recent highlights.
Dark
Your workspace overview and recent highlights.
Accessibility
Your workspace overview and recent highlights.

Spec

Values and token references straight from the Zetta spec.

tabs-list
display
flex
flexDirection
row
backgroundColor
{colors.surface-secondary}
borderRadius
{rounded.base}
padding
4px
gap
4px
tabs-trigger
backgroundColor
transparent
textColor
{colors.muted}
fontFamily
Geist
fontSize
14px
fontWeight
500
height
32px
paddingX
16px
borderRadius
{rounded.base}
display
flex
alignItems
center
justifyContent
center
cursor
pointer
tabs-trigger-hover
textColor
{colors.ink}
backgroundColor
{colors.surface-muted}
tabs-trigger-active
backgroundColor
{colors.surface-card}
textColor
{colors.ink}
shadow
{shadows.sm}
tabs-trigger-focus
outline
2px solid {colors.border-focus}
outlineOffset
2px
tabs-trigger-disabled
textColor
{colors.disabled-text}
cursor
not-allowed
tabs-content
paddingY
{spacing.md}
textColor
{colors.body}
fontFamily
Geist
fontSize
14px
lineHeight
1.6

Build with the skill

No package to install — hand this to your AI to generate tabs in your stack.

Prompt for your AI 
Implement the Zetta "Tabs" component in this project's stack using the zetta-design-md skill.

- Apply the `tabs` spec from the skill (variants: list, trigger, active, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

  • List: surface-secondary track, 4px padding/gap, 8px radius. Triggers: 32px, muted → ink, active = surface-card + var(--shadow-sm).
  • Use role="tablist" / role="tab" with aria-selected; panels use role="tabpanel".

Known gaps

  • Roving-tabindex arrow-key navigation and an underline (non-segmented) variant are not yet specified.