Timeline

free

Timeline arranges activity, history, and milestone entries in chronological order.

Monday, 28 February

Camila Simmonsmentioned you in a commentPost08:34 PM
@Carolyn There are two ways to write error-free programs; only the third one works.
Angelina Gotelliaddedtranslation.xlsto ticketPD-109208:09 PM
Angelina Gotellimentioned you in a commentPost08:06 PM
@Carolyn Don't worry if it doesn't work right. If everything did, you'd be out of a job.

import Timeline from '@/components/ui/timeline';
import Avatar from '@/components/ui/avatar';
import Tag from '@/components/ui/tag';
import { PiPaperclip } from 'react-icons/pi'

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Timeline

pnpm dlx nateui@latest add Timeline

yarn dlx nateui@latest add Timeline

Examples

Basic

Brief received
Requirements were collected and attached to the project.
Design reviewed
The team approved the main layout and edge cases.
Ready for build
Implementation can start once the branch is created.

import Timeline from '@/components/ui/timeline';

export default function BasicDemo() {
  return (

Custom Media

Import completed
Completed
18,432 customer rows were validated.
QA review
In review
Two edge cases are waiting for product approval.
Launch handoff
Queued
Support notes are queued for the release channel.

import Timeline from '@/components/ui/timeline';
import { PiCheck, PiClock, PiFlag } from 'react-icons/pi'

const STEPS = [

API

Timeline renders a list of ordered entries and hides the connector after the last item. Timeline.Item renders the marker column plus the content column for one entry. The exported types extend native ul and li props, but the current implementation only forwards the props listed below.

Timeline

Prop	Description	Type	Default
`children`	Items rendered in sequence. Use `Timeline.Item` children so the final connector can be derived.	`ReactNode`	-
`className`	Extra classes for the root `ul`.	`string`	-
`ref`	Ref forwarded to the root `ul`.	`Ref<HTMLUListElement>`	-

Timeline.Item

Prop	Description	Type	Default
`children`	Content rendered beside the marker.	`ReactNode`	-
`media`	Custom marker content. When omitted, the item renders the default dot.	`string \| ReactNode`	-
`isLast`	Hides the connector and bottom padding. Usually derived by `Timeline` from item position.	`boolean`	Derived from position
`className`	Extra classes for the root `li`.	`string`	-
`ref`	Ref forwarded to the root `li`.	`Ref<HTMLLIElement>`	-