3.0.1

Components

Timeline

new

A vertical or horizontal sequence of dated events.

  1. Project created

    Imported the repository and picked a framework preset.

  2. First deployment

    The preview built in 41 seconds and passed every check.

  3. Custom domain

    DNS verified; certificates renew automatically.

  4. Production launch

    Promote the latest preview once QA signs off.

Installation

npx shadcn@latest add @blank/timeline

Usage

import {
  Timeline,
  TimelineContent,
  TimelineDate,
  TimelineHeader,
  TimelineIndicator,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline"
<Timeline value={1}>
  <TimelineItem step={1}>
    <TimelineHeader>
      <TimelineSeparator />
      <TimelineDate>Mar 4</TimelineDate>
      <TimelineTitle>Project created</TimelineTitle>
      <TimelineIndicator />
    </TimelineHeader>
    <TimelineContent>Imported the repository.</TimelineContent>
  </TimelineItem>
</Timeline>

Items up to value carry data-completed; their indicators and the lines between them turn brand. A timeline is a record rather than a control, so value has no change handler — compute it from your data. The markup is an ordered list.

Examples

Horizontal

TimelineIndicator takes children, so an icon can fill a completed step.

  1. v3.0

    Tokens rebuilt

  2. v3.1

    Blocks gallery

  3. v3.2

    Form primitives

  4. v3.3

    Data grid

API Reference

Timeline

PropTypeDefault
valuenumber0
orientation"vertical" | "horizontal""vertical"

TimelineItem

PropTypeDefault
stepnumber (from 1)—

TimelineDate renders a <time>; pass dateTime, or asChild for another element.