// 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 slots1 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"
      ]
    }
  ]'
/>
Event outputInteract with the preview to inspect the typed payload.
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 outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@selectFires when an item, option, card, or result is selected.
Declarative handlers.wrn
<Timeline
  @select='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Timeline\"], [data-component=\"Timeline\"]")

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})
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
} }