Timeline Component
React timeline component for activity feeds, order tracking and changelogs. Done/active/pending statuses, custom icons and timestamps — built with Tailwind CSS.
Import
javascript
1import { Timeline } from "@neuctra/ui";Basic Usage
Each item carries a status: done, active or pending.
Order placed
09:12Payment confirmed
09:14Out for delivery
12:40Your package is on its way.
Delivered
Custom Icons & Compact Size
v0.3.0 released
Today24 commits merged
YesterdayNext milestone
Props
All available props for the Timeline component.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TimelineItem[] | — | Entries to render (required) |
| items[].title | ReactNode | — | Entry heading |
| items[].description | ReactNode | — | Muted body text |
| items[].time | ReactNode | — | Timestamp shown at the right edge |
| items[].icon | ReactNode | check / dot | Custom marker icon |
| items[].status | "done" | "active" | "pending" | "pending" | Controls marker and text emphasis |
| size | "sm" | "md" | "md" | Density of the list |
| itemClassName | string | — | Styles each entry's row |
| connectorClassName | string | — | Styles the vertical connector line |
| dotClassName | string | — | Styles the status marker/dot |
| contentClassName | string | — | Styles the title/time/description wrapper |
| titleClassName | string | — | Styles the entry title |
| timeClassName | string | — | Styles the timestamp text |
| descriptionClassName | string | — | Styles the entry description |
Accessibility
- Renders an ordered list (<ol>), so sequence is conveyed to screen readers.
- Connector lines and markers are decorative (aria-hidden); titles carry the meaning.
Frequently Asked Questions
How do I install and import the Timeline component?
Install the @neuctra/ui package, then import it with: import { Timeline } from "@neuctra/ui";
What variants and sizes does Timeline support?
Timeline supports sizes: sm, md. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Timeline component accessible?
Timeline is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.