Timeline

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

Installation

npx @obi/ui add timeline

Preview

Install the CLI

Run npx @obi/ui init in your project root.

Add components

Use npx @obi/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

Usage

import { Timeline, TimelineItem } from '@/src/components/Timeline/Timeline';

export default function Example() {
  return (
    <Timeline>
      <TimelineItem title="Install the CLI">
        Run <code>npx @obi/ui init</code> in your project root.
      </TimelineItem>
      <TimelineItem title="Add components">
        Use <code>npx @obi/ui add button input</code> to copy components into your project.
      </TimelineItem>
      <TimelineItem title="Import and use">
        Import from <code>@/components/ui</code> and start building.
      </TimelineItem>
    </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.
className	string	""	Additional classes on the wrapper div.
children	React.ReactNode	—	One or more TimelineItem elements.