FAQ Timeline
Stepped workflow accordion with a vertical connector line, animated numbered dots, and a tag badge per step.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#818cf8" | Accent color for the connector line gradient, active step dot, tag badges, and description background tint. |
| items | StepItem[] | DEFAULT_ITEMS | Array of steps — each needs a step string (01–99), title, description, and optional tag. |
| title | string | "How Uilora works" | Section heading above the timeline. |
| eyebrow | string | "Uilora Workflow" | Mono eyebrow label above the heading. |
When to Use
Use for onboarding flows, product setup guides, pricing tier comparisons, and any sequential process where step order matters. The connector line makes the sequence feel linear and intentional.
Best Practices
Use exactly 4 steps for the cleanest composition — the connector line looks best at that length. Keep step labels 2–4 words. Tags work best with single-word status labels (Free, Pro, Beta).
Why This Component Matters
A timeline turns a bullet list into a journey. The animated dot fill on active communicates 'you are here' without any additional UI — the connector line does the work.
FAQ
QHow does the step dot animate?
It uses `motion.animate` with a background transition from #1a1a1e to accentColor and a scale from 1 to 1.15 — giving the active step a physical 'pop' that reads as selected.
QCan I use icons instead of numbers?
Yes — replace the step span with a Lucide icon. The dot container is 30×30px centered, so any 14px icon fits perfectly.
QDoes the connector line animate?
Currently it's a static gradient div. For a filling animation, wrap it in a motion.div and animate scaleY from 0→1 using useInView or scroll progress.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.