Timeline

TextareaToast

A vertical list of events, like an activity feed.

  1. Order placed9:02 AM
  2. Payment confirmed9:03 AM
    Visa ending in 4242
  3. Shipped2:40 PM
    Tracking number 1Z999AA10123456784
  4. Out for deliveryTomorrow

Installation

pnpm add krz-ui

Usage

import { Timeline } from "krz-ui";
<Timeline
  items={[
    { title: "Order placed", time: "9:02 AM", color: "primary" },
    { title: "Payment confirmed", time: "9:03 AM", color: "success" },
    { title: "Shipped", description: "Tracking number 1Z999AA1", time: "2:40 PM" },
  ]}
/>

API Reference

PropTypeDescription
itemsTimelineItem[]Events with title, description, time and icon.
items[].color"neutral" | "primary" | "success" | "warning" | "danger" | "info"Marker color.
className / style / ref—All go to the outer element. See Customization.
classNames{ item?, marker?, body?, title?, time?, description? }Extra classes for inner parts.