Skip to main content
ninna-ui

Timeline

Vertical timeline for displaying chronological events.

import { Timeline } from "@ninna-ui/data-display"
pnpm add @ninna-ui/data-display

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Timeline component in your application.

import { Timeline } from "@ninna-ui/data-display";


export default function Example() {
  return (
    <Timeline>
      <Timeline.Item>
        <Timeline.Indicator />
        <Timeline.Connector />
        <Timeline.Content>
          <Timeline.Heading>Event Title</Timeline.Heading>
          <Timeline.Description>Details here</Timeline.Description>
          <Timeline.Time>Jan 1, 2024</Timeline.Time>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline>
  );
}

Basic

A basic vertical timeline with events.

Event Title

Details about this event.

Another Event

More details here.

Latest Event

Most recent activity.

With Status

Color-coded indicators for different event types.

neutral Event

Example of a timeline item with neutral status indicator.

primary Event

Example of a timeline item with primary status indicator.

secondary Event

Example of a timeline item with secondary status indicator.

accent Event

Example of a timeline item with accent status indicator.

info Event

Example of a timeline item with info status indicator.

success Event

Example of a timeline item with success status indicator.

warning Event

Example of a timeline item with warning status indicator.

danger Event

Example of a timeline item with danger status indicator.

API Reference

Props for the Timeline component and its sub-components.

Timeline.Indicator

PropTypeDefaultDescription
status'primary' | 'success' | 'danger' | 'warning'-Color variant for the indicator dot
iconReactNode-Custom icon to replace the default dot

Accessibility

  • Timeline uses semantic list structure for screen reader navigation
  • Indicator colors are supplemented with status context in surrounding text
  • Connectors are decorative and hidden from screen readers
  • Time elements use semantic markup for temporal data