Tabs

Controlled tab list with keyboard navigation and an active indicator.

Demo

Usage

import { useState } from 'react'
import { Tabs } from 'regen-ui'

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'activity', label: 'Activity' },
  { id: 'settings', label: 'Settings' },
] as const

export function SectionTabs() {
  const [active, setActive] = useState<(typeof tabs)[number]['id']>('overview')

  return <Tabs active={active} aria-label="Sections" onChange={setActive} tabs={tabs} />
}

Expanded Usage

import { useState } from 'react'
import { Tabs } from 'regen-ui'

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'activity', label: 'Activity' },
  { id: 'settings', label: 'Settings' },
] as const

export function SectionTabs() {
  const [active, setActive] = useState<(typeof tabs)[number]['id']>('overview')

  return <Tabs active={active} aria-label="Sections" expand onChange={setActive} tabs={tabs} />
}

API Reference

Tabs.Props<T extends string>

activeRequired
TypeT
DefaultNone
Currently selected tab id.
expandOptional
Typeboolean
Defaultfalse
Expand tabs equally across the tab list.
onChangeRequired
Type(id: T) => void
DefaultNone
Called when the selected tab should change.
tabsRequired
Typereadonly Item<T>[]
DefaultNone
Tabs rendered in order.
Inherits HTMLAttributes<HTMLDivElement>, except onChange.

Tabs.Item<T extends string>

iconOptional
TypeReactNode
DefaultNone
Optional icon rendered before the label.
idRequired
TypeT
DefaultNone
Stable tab id passed to `active` and `onChange`.
labelRequired
TypeReactNode
DefaultNone
Visible tab label.