Duskmoon UI v10.0.11
Theme
Timeline dm_timeline
## Overview Timeline component for displaying chronological events. Uses CSS classes from `@duskmoon-dev/core`. Item colors include primary, secondary, tertiary, success, warning, error, neutral, and base. The Phoenix `accent` color remains an alias for tertiary. Neutral and base apply upstream marker colors to both dot and icon markers. ## Usage ```elixir <.dm_timeline> <:item title="Step 1" time="Jan 1">First event.</:item> <:item title="Step 2" time="Jan 5" color="success" completed>Done.</:item> </.dm_timeline> ```

Basic Timeline

Order Placed
January 1, 2026
Your order has been placed successfully.
Processing
January 2, 2026
Order is being prepared.
Shipped
January 3, 2026
Package has been shipped.
Delivered
January 5, 2026
Package was delivered.

Colors & States

Completed
Step 1
This step is complete.
In Progress
Step 2
Currently working on this.
Warning
Step 3
Needs attention.
Failed
Step 4
This step encountered an error.
Neutral
Neutral marker with an icon.
Base
Base marker with a dot.
Pending
Step 5
Waiting to start.

Small Size

Event A
9:00 AM
Morning meeting.
Event B
12:00 PM
Lunch break.
Event C
3:00 PM
Afternoon review.

Large Size

Phase 1
Q1 2026
Research and planning completed.
Phase 2
Q2 2026
Development in progress.
Phase 3
Q3 2026
Launch scheduled.

Horizontal Layout

Step 1
Done
Step 2
Done
Step 3
Current
Step 4
Upcoming