← DOCS
navigation

ProgressDots

Section progress indicator with dots.

npx chaos add progress-dots

PREVIEW

USAGE

import { ProgressDots } from '@/components/chaos/navigation/progress-dots';

const items = [
  { id: 'intro', label: 'INTRO', href: '#intro' },
  { id: 'features', label: 'FEATURES', href: '#features' },
  { id: 'contact', label: 'CONTACT', href: '#contact' },
];

<ProgressDots items={items} activeId="features" />

PROPS

PropTypeDefault
itemsDot items {id, label?, href?}
ProgressDotItem[]-
activeIdActive dot id
string-
variantVisual variant
"default" | "gold" | "minimal""default"
directionLayout direction
"vertical" | "horizontal""vertical"
showConnectorShow connectors between dots
booleanfalse
onDotClickClick callback
(id: string) => void-