// Generated by scripts/generate-showcase.mjs. Do not edit directly. page TimelineDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Timeline example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default timeline for a modern application." state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"timeline-0-1\",\"key\":\"timeline-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#timeline-demo\",\"actionHref\":\"#timeline-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"timeline-0-2\",\"key\":\"timeline-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#timeline-demo\",\"actionHref\":\"#timeline-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Timeline" description = "Present responsive chronological activity, milestones, or workflow status with rich item metadata." } view {
Base component

Timeline

Present responsive chronological activity, milestones, or workflow status with rich item metadata.

7 props1 slots0 outputsTheme readyResponsive
Interactive playground

Configure Timeline

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Timeline
  title="Timeline example"
  description="A polished default timeline for a modern application."
  items='[
    {
      "id": "timeline-0-1",
      "key": "timeline-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#timeline-demo",
      "actionHref": "#timeline-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "timeline-0-2",
      "key": "timeline-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#timeline-demo",
      "actionHref": "#timeline-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Component props7 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Application timeline

Explain the sequence and current status of a request or process.

01
Live preview
Component usage.wrn
<Timeline
  title="Request progress"
  description="Latest updates for this service request."
  items='[
    {
      "title": "Request submitted",
      "description": "Received successfully",
      "time": "09:30",
      "status": "complete"
    },
    {
      "title": "Verification",
      "description": "Documents are being reviewed",
      "time": "10:15",
      "current": true
    },
    {
      "title": "Decision",
      "description": "Pending verification",
      "time": "—"
    }
  ]'
/>
Compact

Compact activity history

Use a dense history inside drawers, side panels, and record views.

02
Live preview
Component usage.wrn
<Timeline
  size="sm"
  title="Recent activity"
  description="A compact configuration for dashboards and dense product surfaces."
  items='[
    {
      "title": "Status changed",
      "time": "Today"
    },
    {
      "title": "Comment added",
      "time": "Yesterday"
    },
    {
      "title": "Document uploaded",
      "time": "3 days ago"
    }
  ]'
  variant="soft"
/>
Advanced

Rich milestone timeline

Use icons, descriptions, times, and states for longer workflows.

03
Live preview
Component usage.wrn
<Timeline
  size="lg"
  title="Implementation milestones"
  description="Planned delivery sequence."
  items='[
    {
      "title": "Foundation",
      "description": "Tokens, themes, and primitives",
      "icon": "icon-[lucide--layers-3]",
      "status": "complete"
    },
    {
      "title": "Components",
      "description": "Reusable UI and documentation",
      "icon": "icon-[lucide--blocks]",
      "current": true
    },
    {
      "title": "Applications",
      "description": "Compose production interfaces",
      "icon": "icon-[lucide--rocket]"
    }
  ]'
  variant="raised"
/>
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Timeline"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No
} }