Dashral Pro is on the wayGet 30% off at launch

Dashral

Timeline

A vertical list of events in chronological order.

$ pnpm dlx shadcn@latest add https://dashral.com/r/timeline.json

  1. Order delivered

    Signed by Olivia Martin at the front desk.

  2. Out for delivery

  3. Customer left a note

    “Please leave the package with reception.”

  4. Payment of $249 received

  5. Account created

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/timeline.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/timeline

Usage

example.tsx
import { Timeline } from "@/components/dashral/timeline"

<Timeline
  items={[
    { title: "Order placed", time: "Oct 20, 09:12", dateTime: "2026-10-20T09:12" },
    { title: "Shipped", time: "Oct 21, 14:30", dateTime: "2026-10-21T14:30" },
  ]}
/>

Examples

Team activity

Avatars as markers, comments and files in the description; post a comment and it rises in at the top.

  1. Liam Johnson commented

    Looks great. Can we keep the promo code field collapsed by default?

  2. Sofia Davis moved the task to In review

  3. Budi Santoso attached a file

    checkout-flow-v3.pdf2.4 MB

  4. Olivia Martin created the task

Deployments

Status colors with a spinner while building; Redeploy adds a build that turns ready.

Production

acme-dashboard.vercel.app

  1. Ready9c19c23

    Checkout: keep the promo code field collapsed main

  2. Failedffa07a7

    Add the welcome email feat/emailsView build logs

  3. Ready21e44e6

    Text Reveal on the home page main

API reference

Timeline

Also takes every prop of <ol>(opens in a new tab).

PropTypeDefault
items{ title, description?, time?, dateTime?, icon?, color?, id? }[]

The events, in order. Required.

—
classNames{ item, marker, title, time, description }

Classes for each part.

—
classNamestring

Extra classes, merged with cn() so yours win.

—

Accessibility

  • An ordered list; time goes in a <time> element, with dateTime for machines.