Timeline

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

Monday, 28 February

  • Camila Simmons
    Camila Simmonsmentioned you in a commentPost08:34 PM
    @Carolyn There are two ways to write error-free programs; only the third one works.
  • Angelina Gotelli
    Angelina Gotelliaddedtranslation.xlsto ticketPD-109208:09 PM
  • Angelina Gotelli
    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/cli@latest add Timeline

Examples

Basic

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

export default function BasicDemo() {
  return (

Custom Media

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

PropDescriptionTypeDefault
childrenItems rendered in sequence. Use Timeline.Item children so the final connector can be derived.ReactNode-
classNameExtra classes for the root ul.string-
refRef forwarded to the root ul.Ref<HTMLUListElement>-

Timeline.Item

PropDescriptionTypeDefault
childrenContent rendered beside the marker.ReactNode-
mediaCustom marker content. When omitted, the item renders the default dot.string | ReactNode-
isLastHides the connector and bottom padding. Usually derived by Timeline from item position.booleanDerived from position
classNameExtra classes for the root li.string-
refRef forwarded to the root li.Ref<HTMLLIElement>-