Timeline

Vertical timeline with dated entries and status indicators.

Preview

How it works

Three steps from zero to a shipped page.

  1. 1

    Choose a theme

    Pick a color palette that fits your brand.

  2. 2

    Add components

    Copy the blocks you need and customize the props.

  3. 3

    Ship it

    Deploy production-ready layouts in hours, not weeks.

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/timeline.json

Usage

timeline-demo.tsx
import Timeline from "@/components/blocks/timeline"

export default function TimelineDemo() {
  return (
    <Timeline
      // Update the timeline headline and steps.
      title="How it works"
      description="Three steps from zero to a shipped page."
      steps={[
        {
          title: "Choose a theme",
          description: "Pick a color palette that fits your brand.",
        },
        {
          title: "Add components",
          description: "Copy the blocks you need and customize the props.",
        },
        {
          title: "Ship it",
          description: "Deploy production-ready layouts in hours, not weeks.",
        },
      ]}
    />
  )
}
0