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

Primary workflow

A clean default configuration for everyday product interfaces.
View details
Supporting example

A clean default configuration for everyday product interfaces.
View details

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

sizestringcolorstringtitlestringdescriptionstringitemsunknown[]

[
  {
    "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"
    ]
  }
]

variantstringclassstring

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.

Live preview

Request submitted

Received successfully
Verification

Documents are being reviewed
Decision

Pending verification

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.

Live preview

Status changed
Comment added
Document uploaded

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.

Live preview

Foundation

Tokens, themes, and primitives
Components

Reusable UI and documentation
Applications

Compose production interfaces

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.

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`title`	string	`"Timeline"`	No
`description`	string	`""`	No
`items`	unknown[]	`[]`	No
`variant`	string	`"default"`	No
`class`	string	`""`	No