Lucent UI
← PageLayoutTimelineMenu →
✦ LLM-ready

Timeline

molecule

Modern activity-feed timeline with compact filled dots, inline title + date layout, and optional rich content slots. Ideal for activity feeds, changelogs, and progress trackers.

"Add a Timeline from lucent-ui showing an activity feed. Use filled-dot status indicators (success, info, warning, danger), inline dates, and optional content slots for rich nested blocks."

Usage

React / JSX
import { Timeline } from 'lucent-ui'

<Timeline
  items={[
    { title: "Deployed to production", date: "2 min ago", status: "success" },
    { title: "Build completed", date: "5 min ago", status: "success" },
    { title: "Tests passed", date: "8 min ago", status: "info" },
  ]} />

Installation

pnpm add lucent-ui

API Reference

Timeline props — * required

PropTypeDefaultDescription
items*TimelineItem[]—Array of { id, title, description?, date?, status?, icon?, content? } items. content accepts ReactNode for rich nested blocks.
styleReact.CSSProperties—Inline styles for the timeline wrapper.