Redpanda UIRedpanda UI

Timeline

Displays a timeline of events.

Made by pasqualevitiello
Edit on GitHub

Powered by

Origin UIOrigin UI

Installation

v0
Loading component...

When to use

Timeline displays chronological events. Use this decision tree:

Usage

import {
  Timeline,
  TimelineHeader,
  TimelineIndicator,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from '@/registry/components/timeline';

<Timeline defaultValue={3}>
  {items.map((item) => (
    <TimelineItem key={item.id} step={item.id}>
      <TimelineHeader>
        <TimelineSeparator />
        <TimelineTitle className="-mt-0.5">{item.title}</TimelineTitle>
        <TimelineIndicator />
      </TimelineHeader>
    </TimelineItem>
  ))}
</Timeline>

Examples

Default

v0
Loading component...

Detailed

v0
Loading component...

Activity

v0
Loading component...

Activity (Card)

v0
Loading component...

Credits

  • We use Origin UI for the timeline component and style.

Recent changes

  • patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
  • minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
  • minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
  • majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
  • minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
See full history →
Built by malinskibeniamin. The source code is available on GitHub.

On this page

Installation
When to use
Usage
Examples
Default
Detailed
Activity
Activity (Card)
Credits
Recent changes