Timeline
Timeline is used to display a sequence of events along a horizontal or vertical axis.
Installation
npx jsx-daisyui add timelineDefault
timeline-default
- First milestone
Second milestone
Third milestone
Final step
Vertical
timeline-vertical
Both sides
timeline-both-sides
Colored
timeline-colored
Props
Timeline.Root
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | - | Layout direction of the timeline. |
snapIcon | boolean | - | Allows snapping to the icon on scroll. |
compact | boolean | - | Reduces padding around the timeline items. |
Timeline.Item
| Prop | Type | Default | Description |
|---|---|---|---|
first | boolean | - | Marks the item as the first in the timeline (hides top/left line). |
last | boolean | - | Marks the item as the last in the timeline (hides bottom/right line). |
lineColor | string | - | Custom color class for the connecting lines. |
Timeline.Start & Timeline.End
| Prop | Type | Default | Description |
|---|---|---|---|
box | boolean | - | Wraps the content in a styled box. |