dashboardcn

Search documentation

Search for a page or component.

Timeline

PreviousNext

A vertical chronology of events, each with a marker, connector, and free-form content. Use it for audit logs, activity feeds, and version history.

Rollout auditCheckout redesign

  1. Feature flag created

    Owner assigned

    Created checkout-redesign for the billing workspace.

  2. Canary rollout started

    Canary

    Enabled for 5% of workspaces with session replay sampling on.

  3. Regional guardrail tripped

    Paused

    Latency climbed in eu-central-1; rollout is holding while routing warms.

  4. Customer messaging prepared

    Docs

    Support macro and changelog draft are ready in Launch notes.

  5. Launch window scheduled

    Queued

    Full rollout waits for the next error-budget sweep.

  6. Release checklist verified

    Ready

    Rollback owner and dashboard checks are recorded in the release audit.

import {
  CircleCheck,
  Clock,

A vertical timeline for shadcn/ui: a rail, a marker per event, and free-form content beside it. Use it for audit logs, activity feeds, deployment history, and version lists.

Installation

pnpm dlx shadcn@latest add @dashboardcn/timeline

Usage

import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineHeader,
  TimelineItem,
  TimelineMarker,
  TimelineRail,
  TimelineTime,
  TimelineTitle,
} from "@/components/ui/timeline"

<Timeline>
  <TimelineItem status="current">
    <TimelineRail>
      <TimelineMarker><Rocket /></TimelineMarker>
      <TimelineConnector />
    </TimelineRail>
    <TimelineContent>
      <TimelineHeader>
        <TimelineTitle>Canary rollout started</TimelineTitle>
        <Badge variant="secondary">Canary</Badge>
        <TimelineTime dateTime="2026-05-22T09:34">09:34</TimelineTime>
      </TimelineHeader>
      <TimelineDescription>Enabled for 5% of workspaces.</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Examples

Compact log

Tighten the rail and content spacing with classes. Markers take any icon and inherit text color.

  1. Chargeback case opened

    The customer disputed a renewal charge, and the finance team has seven days to submit evidence.

  2. Payment captured

  3. Payment authorized

  4. Invoice generated

import { CircleCheck, CreditCard, FileText, ShieldAlert } from "lucide-react"

import { cn } from "@/lib/utils"

Activity feed

Put an avatar in the marker and any content, including cards, inside TimelineContent.

Studio reviewRunner launch assets

  1. Product asset uploaded

    Review

    Final hero crop is ready for retouch review with the side profile, lace detail, and marketplace thumbnail queued.

    PDP hero4 cropsOpen board

  2. Lighting pass reviewed

    The side profile reads clearly on the landing page. Keep the outsole shadow soft so the sole texture stays visible.

  3. Copy note resolved

    Updated the launch tile copy and aligned the product badge with the approved campaign language.

  4. Review package ready

    Exported the approved crops and shared the board with the marketplace team for final sign-off.

import { ArrowUpRight } from "lucide-react"

import { Badge } from "@/components/ui/badge"

Version history

An empty marker renders a plain ring. status="current" highlights the marker and sets aria-current.

Version history

  1. v8

    Draft

    Prepared billing copy, tax preview states, and the final approval checklist.

    Maya Chen

  2. v7

    Live

    Published the pricing table refresh after support macros cleared review.

    Nora Vazquez

  3. v6

    Added regional tax notes and restored the upgrade confirmation banner.

    Eli Wong

  4. v5

    Reworked mobile spacing for plan cards and invoice preview rows.

    Maya Chen
import { X } from "lucide-react"

import { Badge } from "@/components/ui/badge"