react ~6 KB 0 deps v0.1.0 ↗ GitHub ↗

@mshafiqyajid/react-timeline

Headless timeline hook and styled component. Status-driven dot colours, line/dashed/none connectors, left/right/center alignment, sizes and tones.

Playground #

  1. Order placed

  2. Processing

  3. Shipped

  4. Out for delivery

  5. Delivered

Props
TSX
import { TimelineStyled } from "@mshafiqyajid/react-timeline/styled";
import "@mshafiqyajid/react-timeline/styles.css";

<TimelineStyled
  items={items}
  tone="primary"
/>

Install # 

npm install @mshafiqyajid/react-timeline

Quick start # 

import { TimelineStyled } from "@mshafiqyajid/react-timeline/styled";
import "@mshafiqyajid/react-timeline/styles.css";

<TimelineStyled
  items={[
    { id: "1", title: "Order placed",  date: "Jan 1", status: "completed" },
    { id: "2", title: "Shipped",       date: "Jan 3", status: "active" },
    { id: "3", title: "Delivered",     date: "Jan 5", status: "default" },
  ]}
/>

API #

PropTypeDefaultDescription
itemsTimelineItem[]—{ id, title, description?, date?, icon?, status? }
orientation"vertical" | "horizontal""vertical"Layout direction
size"sm" | "md" | "lg""md"Dot and text size
tone"neutral" | "primary""neutral"Active item colour
connector"line" | "dashed" | "none""line"Connector style
align"left" | "right" | "center""left"Content alignment (vertical only)
Edit this page on GitHub