Components

Underline tabs

Text labels with sliding underline. Optional auto-advance timer. Used for workflow, role, and module tabs.

4 tokens

Preview

Usage

import { UnderlineTabs } from '@/components/marketing/underline-tabs'

const [active, setActive] = useState('enroll')

<UnderlineTabs
  tabs={[{ key: 'enroll', label: 'Enroll' }, { key: 'teach', label: 'Teach' }]}
  active={active}
  onChange={setActive}
  autoAdvance // optional, off by default
/>

Tokens used

This component reads these tokens directly: change one on a Foundations page and it updates here and across the site.