A
Aether UI

Timeline Feed

A vertical timeline with date markers and event entries. Items are grouped by date automatically; each entry renders an icon, title, description, and relative timestamp.

  1. v0.2.0 released

    Added 12 new patterns and AI-native UI primitives.

  2. Phase 7 merged

    Public registry hardened; all packages published to npm.

  3. 1,000 stars on GitHub

    Thank you to everyone who starred the repository!

  4. Initial launch

    Aether UI publicly launched with 16 primitives and 12 patterns.

import { TimelineFeed } from "@aetherstack/patterns"

Installation

terminal
npx aether-ui add timeline-feed

Import

import.tsx
import { TimelineFeed } from "@aetherstack/patterns"

Usage

timeline-feed.tsx
import { TimelineFeed } from "@aetherstack/patterns"
import { Rocket } from "lucide-react"

const items = [
  {
    id: "1",
    title: "Initial launch",
    description: "Aether UI publicly launched.",
    timestamp: new Date(2024, 1, 28, 12, 0),
    icon: <Rocket className="h-4 w-4" />,
  },
]

export function MyTimeline() {
  return <TimelineFeed items={items} />
}

Props

PropTypeDefaultDescription
items*TimelineItem[]—Array of timeline entries. Each has id, title, description, timestamp, and an optional icon ReactNode.
classNamestring—Additional classes on the root element.

* Required

Accessibility

  • →Rendered as a <ol> (ordered list) since timeline events have inherent chronological order.
  • →Date markers use <time datetime> with machine-readable ISO strings.
  • →Icons are aria-hidden — event titles are the primary accessible label for each entry.
  • →Relative timestamps ("2 days ago") include a visually-hidden absolute date for screen readers.