baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions
benjaminpalko/.opencode/skills/daisyui/components/timeline.md
Benjamin Palko a6d4064af8 format project
2026-08-11 16:25:07 -04:00

944 B
Raw Blame History

timeline

Timeline component shows a list of events in chronological order

timeline docs

Class Names:

  • Component: timeline
  • Part: timeline-start, timeline-middle, timeline-end
  • Modifier: timeline-snap-icon, timeline-box, timeline-compact
  • Direction: timeline-vertical, timeline-horizontal

Syntax

<ul class="timeline {MODIFIER}">
	<li>
		<div class="timeline-start">{start}</div>
		<div class="timeline-middle">{icon}</div>
		<div class="timeline-end">{end}</div>
	</li>
</ul>

Rules

  • {MODIFIER} is optional and can have one of the modifier/direction class names
  • To make a vertical timeline, add the timeline-vertical class to the ul element or just do nothing (because its the default style.)
  • Add timeline-snap-icon to snap the icon to the start instead of middle
  • Add the timeline-compact class to force all items on one side