// Generated by scripts/generate-showcase.mjs. Do not edit directly. page ListDetail { 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") ?? "List example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list for a modern application." state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"list-0-1\",\"key\":\"list-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\":\"#list-demo\",\"actionHref\":\"#list-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\":\"list-0-2\",\"key\":\"list-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#list-demo\",\"actionHref\":\"#list-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 = "List" description = "Present structured responsive linked or status items with icons, descriptions, actions, and selection events." } view {
Base component

List

Present structured responsive linked or status items with icons, descriptions, actions, and selection events.

7 props1 slots1 outputsTheme readyResponsive
Interactive playground

Configure List

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

Live preview
Component code
<List
  title="List example"
  description="A polished default list for a modern application."
  items='[
    {
      "id": "list-0-1",
      "key": "list-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": "#list-demo",
      "actionHref": "#list-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": "list-0-2",
      "key": "list-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#list-demo",
      "actionHref": "#list-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

Linked resource list

Present related links with supporting descriptions and icons.

01
Live preview
Component usage.wrn
<List
  title="Citizen resources"
  description="Commonly requested public information."
  items='[
    {
      "label": "Report crime",
      "href": "#report",
      "icon": "icon-[lucide--shield-alert]"
    },
    {
      "label": "Track complaint",
      "href": "#track",
      "icon": "icon-[lucide--scan-search]"
    },
    {
      "label": "Certificates",
      "href": "#certificates",
      "icon": "icon-[lucide--file-check-2]"
    }
  ]'
/>
Compact

Compact status list

Use a dense list in sidebars, dashboards, and record panels.

02
Live preview
Component usage.wrn
<List
  size="sm"
  title="Current status"
  description="A compact configuration for dashboards and dense product surfaces."
  items='[
    {
      "label": "Application received",
      "status": "Complete"
    },
    {
      "label": "Verification",
      "status": "In progress"
    },
    {
      "label": "Decision",
      "status": "Pending"
    }
  ]'
  variant="soft"
/>
Advanced

Rich action list

Combine descriptions, icons, statuses, and actions in a structured collection.

03
Live preview
Component usage.wrn
<List
  size="lg"
  title="Service requests"
  description="Recent requests and their current status."
  items='[
    {
      "label": "Address verification",
      "description": "Submitted yesterday",
      "status": "Review",
      "href": "#request-1"
    },
    {
      "label": "Character certificate",
      "description": "Submitted 3 days ago",
      "status": "Approved",
      "href": "#request-2"
    }
  ]'
  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
<List
  @select='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

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

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"List"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No
} }