Vertical Timeline
Displays chronological or sequential content in an organized way. Perfect for showcasing project histories, step-by-step processes, or event sequences.
Q1: User Analytics Dashboard
Launching a comprehensive analytics dashboard to help users track their performance.
Q2: Integrations
Introducing integrations with major third-party services like Slack and Salesforce.
Q3: Mobile App
Releasing our first mobile application for iOS and Android platforms.
Q4: AI-Powered Insights
Implementing AI-driven insights to provide personalized recommendations.
Usage
import { VerticalTimeline, VerticalTimelineConnector, VerticalTimelineContent, VerticalTimelineDot, VerticalTimelineItem, VerticalTimelineSeparator,} from "@/app/_components/ui/vertical-timeline";<VerticalTimeline position="left" className="md:hidden"> <VerticalTimelineItem> <VerticalTimelineSeparator> <VerticalTimelineDot color="primary" variant="outlined" /> <VerticalTimelineConnector /> </VerticalTimelineSeparator> <VerticalTimelineContent>Timeline Item Content</VerticalTimelineContent> </VerticalTimelineItem></VerticalTimeline>Props
VerticalTimeline
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed. |
className | string | - | Additional classes. |
position | "left" | "right" | "alternate" | left | The position of the timeline. |
VerticalTimelineItem
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed. |
className | string | - | Additional classes. |
position | "left" | "right" | "alternate" | left | The position of the timeline. |
VerticalTimelineSeparator
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed. |
className | string | - | Additional classes. |
VerticalTimelineConnector
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional classes. |
VerticalTimelineDot
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional classes. |
color | "primary" | "secondary" | "success" | "warning" | "error" | - | The color of the dot. |
variant | "filled" | "outlined" | - | The variant of the dot. |
VerticalTimelineContent
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed. |
className | string | - | Additional classes. |
position | "left" | "right" | "alternate" | left | The position of the timeline. |
VerticalTimelineOppositeContent
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed. |
className | string | - | Additional classes. |
position | "left" | "right" | "alternate" | left | The position of the timeline. |