Timeline
Displays a sequence of events in chronological order. Supports three statuses, custom icon content, connector styles, collapsible items, and alternating alignment.
Basic
Shorthand Title/Time/Description parameters — no child slots needed. Status drives the circle colour automatically.
Repository created
Initialised with README, licence, and CI workflow.
First pull request
Core authentication module merged after review.
Beta deployment
Staging environment live — gathering early feedback.
Public launch
Target: end of Q1.
With Custom Icons
Pass any content into TimelineIcon via the IconContent slot. TimelineContent goes in ChildContent.
v1.0 released
Initial public release shipped to production.
Team doubled
Four new engineers and a designer joined the squad.
50 k users
Monthly active users crossing the 50 000 mark.
Series A
Fundraising round targeting $8 M.
Alignment
Left and Right position the icon relative to the content. ShowConnector=false on the last item removes the trailing connector line.
Left
Design
Wireframes approved.
Development
Core features built.
QA
Testing in progress.
Launch
Scheduled for next sprint.
Right
Design
Wireframes approved.
Development
Core features built.
QA
Testing in progress.
Launch
Scheduled for next sprint.
Alternating Layout
TimelineAlign.Alternate distributes even items to the left and odd items to the right, making long histories easier to scan.
Project kick-off
Team onboarded and milestones agreed.
Development sprint
Core features implemented and tested.
Bug bash
24 issues in the queue.
Release
Planned ship date.
Icon Variants
Solid (default) fills the circle. Outline shows a hollow ring with coloured border — useful for differentiating event types.
Solid
Deployed
Production deploy succeeded.
Merged
Feature branch merged to main.
Scheduled
Next maintenance window.
Outline
Deployed
Production deploy succeeded.
Merged
Feature branch merged to main.
Scheduled
Next maintenance window.
Sizes
Size controls the icon diameter and the gap between items. Small is compact; Large gives more breathing room.
Small
Shipped
In transit
Delivered
Medium (default)
Shipped
In transit
Delivered
Large
Shipped
In transit
Delivered
Connector Styles
Override the connector below each item with ConnectorStyle. Dashed and Dotted are useful for optional or uncertain steps.
Solid (default)
Booked
Confirmed
Pending
Dashed
Booked
Confirmed
Pending
Dotted
Booked
Confirmed
Pending
Connector Spacing
Pass ConnectorClass to override the connector height per item. Useful for giving taller card content more breathing room.
Default
Event A
Event B
Event C
min-h-12
Event A
Event B
Event C
min-h-20
Event A
Event B
Event C
Collapsible Items
IsCollapsible wraps the item in a Collapsible component. ChildContent is the always-visible trigger; DetailContent is the expandable body.
Added Google and GitHub OAuth2 sign-in with PKCE flow and refresh-token rotation.
Added distributed lock around cache revalidation; regression tests included.
Tracks Epic #57 — redesigned settings panel with per-workspace overrides.
Connected Fit
ConnectorFit.Connected removes the ring gap so the line runs flush against the icon — ideal for compact process flows.
Order placed
Payment confirmed
Preparing order
Dispatched
Large Collapsible Content
Use DetailContent for rich expandable sections — perfect for changelogs or release notes.
What's new
- DataView component with virtualisation and selection
- SplitButton with accessible keyboard handling
- Timeline collapsible detail slot
- Dark-mode contrast improvements across all badges
Breaking changes
- ButtonGroup: removed deprecated
Orientationalias — useDirection
- Fixed Select dropdown clipping inside overflow-hidden containers
- Corrected Tab keyboard trap in Dialog on mobile Safari
- Upgraded Tailwind to 4.1
Empty State
Use TimelineEmpty when there are no items to show. Accepts optional custom content.
Default message
No timeline items to display.
Custom message
No events yet — check back soon.
API Reference
Parameters for Timeline and its sub-components.
| Prop | Type | Default | Description |
|---|---|---|---|
| Size | TimelineSize | Medium | Small, Medium, or Large — controls gap between items. |
| Align | TimelineAlign | Center | Center (date|icon|content), Left, Right, or Alternate. |
| ConnectorFit | TimelineConnectorFit | Spaced | Spaced = ring gap around icon; Connected = line touches icon. |
| Class | string? | null | Additional CSS classes. |
TimelineItem
| Prop | Type | Default | Description |
|---|---|---|---|
| Status | TimelineStatus | Completed | Completed, InProgress, or Pending. |
| ConnectorStyle | TimelineConnectorStyle | Solid | Solid, Dashed, or Dotted for the connector below this item. |
| IsCollapsible | bool | false | Whether the description content can be toggled open/closed. |
| DefaultOpen | bool | true | Initial open state when IsCollapsible is true. |
| Title | string? | null | Shorthand — renders full content tree when ChildContent is null. |
| Time | string? | null | Shorthand time/date text. |
| Description | string? | null | Shorthand description text. |
TimelineIcon
| Prop | Type | Default | Description |
|---|---|---|---|
| Color | TimelineColor | Primary | Primary, Secondary, Muted, Accent, or Destructive. |
| Variant | TimelineIconVariant | Solid | Solid (filled) or Outline. |
| Loading | bool | false | Pulse animation for in-flight state. |
| ChildContent | RenderFragment? | null | Custom icon content rendered inside the circle. |
TimelineEmpty
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | Custom empty message. Falls back to "No timeline items to display." |
| Class | string? | null | Additional CSS classes. |