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.

Build Passed

All tests passed successfully.

Deploy Failed

Deployment to staging failed.

Review Needed

Code review requested.

In Progress

Working on hotfix.

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