sigilUI

Timeline Section

Vertical timeline with date, title, description, and optional icon per event.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { TimelineSection } from "@sigil-ui/components";

Usage

<TimelineSection
  label="Changelog"
  title="What's new"
  events={[
    { date: "Apr 2026", title: "v2.0 released", description: "Complete token system rewrite." },
    { date: "Mar 2026", title: "Preset system", description: "31 curated presets." },
    { date: "Feb 2026", title: "CLI launched", description: "Init, add, preset, doctor." },
  ]}
/>

With custom icons

<TimelineSection
  title="Milestones"
  events={[
    { date: "2026", title: "Launch", icon: <RocketIcon /> },
    { date: "2025", title: "Founded", icon: <StarIcon /> },
  ]}
/>

Props

PropTypeDefaultDescription
labelstring—Uppercase mono label
titlestring—Section heading (omit to hide)
descriptionstring—Supporting text
eventsTimelineEvent[]requiredArray of { date, title, description?, icon? }
classNamestring—Additional CSS classes

Plus all standard <section> HTML attributes.