A vertical or horizontal timeline with steps, dates, and indicators.
Features
- Vertical and horizontal orientations.
- Controlled or uncontrolled active step.
- Composable parts: item, header, date, title, content, indicator, and separator.
- Completed steps are highlighted automatically up to the active step.
Installation
pnpm dlx shadcn@latest add @syedmoin/timeline
Usage
import {
Timeline,
TimelineContent,
TimelineDate,
TimelineHeader,
TimelineIndicator,
TimelineItem,
TimelineSeparator,
TimelineTitle,
} from "@/components/timeline"<Timeline defaultValue={3}>
<TimelineItem step={1}>
<TimelineHeader>
<TimelineDate>March 2024</TimelineDate>
<TimelineTitle>Project Initialized</TimelineTitle>
</TimelineHeader>
<TimelineIndicator />
<TimelineSeparator />
<TimelineContent>Set up the repository.</TimelineContent>
</TimelineItem>
</Timeline>