Timeline

A component to display a list of events vertically in a specific order.

Source
John doe
Commented 2d ago
Jane doe
Commented 4d ago
John doe
Commented 6d ago

Installation

npx @rahimstack@latest add timeline

Usage

Example

John doe
Locked the thread 2 hours ago
Jack
Replied 2d ago
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
John DoeOwner
Opened the thread 2d ago

API Reference

const TimelineAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Timeline__root",
    ]),
    item: cva([
        "UI-Timeline__item",
        "flex text-md",
    ]),
    leftSection: cva([
        "UI-Timeline__leftSection",
        "flex flex-col items-center mr-4",
    ]),
    icon: cva([
        "UI-Timeline__icon",
        "flex items-center justify-center w-8 h-8 border rounded-full flex-none",
    ]),
    line: cva([
        "UI-Timeline__line",
        "w-px h-full bg-[--border]",
    ]),
    detailsSection: cva([
        "UI-Timeline__detailsSection",
        "pb-8",
    ]),
    title: cva([
        "UI-Timeline__title",
        "text-md font-semibold",
    ]),
    description: cva([
        "UI-Timeline__description",
        "text-[--muted] text-sm",
    ]),
})