Display

Timeline

Events in order: a version history, an activity feed, the steps of a sync.

import { Timeline, formatRelative } from "@flinbu/seed";

Version history

v2.4 published4 minutes ago
12 tokens and 3 components went live.
Ana approved Pluto’s proposal52 minutes ago
Darken text-tertiary in Light.
Figma sync found drift5 hours ago
button/primary differs in 2 places.
Draft createdyesterday

import { Timeline } from "@flinbu/seed";
import { Check, GitCompare, Rocket } from "lucide-react";

const now = new Date();
const ago = (m: number) => new Date(now.getTime() - m * 60000);

<Timeline className="w-full max-w-md" now={now} items={[
  { title: "v2.4 published", description: "12 tokens and 3 components went live.", time: ago(4), status: "success", icon: <Rocket /> },
  { title: "Ana approved Pluto’s proposal", description: "Darken text-tertiary in Light.", time: ago(52), status: "accent", icon: <Check /> },
  { title: "Figma sync found drift", description: "button/primary differs in 2 places.", time: ago(300), status: "warning", icon: <GitCompare /> },
  { title: "Draft created", time: ago(1560) },
]} />

Use it for

History and activity.

Props

Prop	Type	Default	Description
`items`	`{ title, description?, time?, status?, icon?, content? }[]`	–	Newest first for activity.
`status`	`'default''accent''success''warning''error'`	–	Colors the marker.
`now / locale`	`Date / string`	–	For relative times.
`dense`	`boolean`	–	Tighter spacing.

Accessibility

An ordered list; Date times show as relative text with the full date in a time element.