Timeline

A vertical step list with numbered indicators and connector lines, for ordered sequences like setup guides, onboarding flows, and activity feeds.

Installation

npx dafink-ui add timeline

Demos

Install the CLI

Run npx dafink-ui init in your project root.

Add components

Use npx dafink-ui add button to copy components into your project.

Import and use

Import from @/components/ui and start building.

Horizontal variant

Pass direction="horizontal" to lay steps out in a row with a connecting line across the top.

Discovery

Research & requirements

Design

Wireframes & prototypes

Build

Development & testing

Launch

Deploy & monitor

Interactive example

Click the button to append steps one at a time. Each new entry slides in and the indicator dot pops.

Step 1 of 5

Clone repository

main @ a1b2c3d · 0.4s

Custom labels

Pass any string as indicator, years, initials, icons, and the dot resizes to fit: a perfect circle for short content, a pill for longer content like a 4-digit year.

Company founded

Started as a two-person design studio.

First product

Shipped our first component library, v1.

Series A

Raised funding to grow the platform team.

Remote-first

Moved to a fully distributed team.

DaFink UI launch

Open-sourced our internal design system.

Composition

</Timeline>

Props

Name	Type	Default	Description
animate	"stagger" \| "none"	"stagger"	Mount animation. stagger fades and slides each item in with a cascading delay; the container holds its full size from the start so there is no layout shift. Use none when adding items dynamically over time and animating them yourself.
direction	"vertical" \| "horizontal"	"vertical"	Layout direction. vertical stacks items top-to-bottom; horizontal places them in a row with the connector line across the top.
variant	"brand" \| "muted"	"brand"	Controls the indicator dot style. brand = filled brand color; muted = outlined neutral.
spacing	"comfortable" \| "compact"	"comfortable"	Gap between items. comfortable is the generous default for standalone timelines; compact tightens it for timelines nested inside other content (a collapsible, a card, a sidebar).
className	string	""	Additional classes on the wrapper div.
children	React.ReactNode	-	One or more TimelineItem elements.

Accessibility

Timeline is a display-only component with no interactive elements and no component-specific keyboard behavior. Indicator dots and connector lines are marked aria-hidden since they're purely decorative, and each step's title renders as a plain paragraph. Consumers who need the sequence announced as an ordered list should wrap items in their own ol/li structure via className, since Timeline doesn't impose one itself.