Marquee | UI Showcase
WRNexus UI
Base component

Marquee

Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.

7 props1 slots2 outputsTheme readyResponsive
Interactive playground

Configure Marquee

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

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

Partner and capability strip

Continuously present short labels, partners, channels, or capabilities.

01
Live preview
Component usage.wrn
<Marquee
  title="Supported capabilities"
  description="A polished default marquee for a modern application."
  items='[
    {
      "label": "SSR"
    },
    {
      "label": "CSR"
    },
    {
      "label": "Themes"
    },
    {
      "label": "Accessibility"
    },
    {
      "label": "Responsive UI"
    }
  ]'
/>
Compact

Compact announcement ticker

Use a dense ticker for short operational updates.

02
Live preview
Component usage.wrn
<Marquee
  size="sm"
  title="Compact Marquee"
  description="A compact configuration for dashboards and dense product surfaces."
  items='[
    {
      "label": "All services operational"
    },
    {
      "label": "New components published"
    },
    {
      "label": "Documentation updated"
    }
  ]'
  variant="soft"
/>
Advanced

Large visual marquee

Use stronger spacing and richer items on marketing pages.

03
Live preview
Component usage.wrn
<Marquee
  size="lg"
  color="info"
  title="Built for complete digital platforms"
  description="A richer configuration demonstrating additional content and hierarchy."
  items='[
    {
      "label": "Public portals",
      "icon": "icon-[lucide--landmark]"
    },
    {
      "label": "Enterprise systems",
      "icon": "icon-[lucide--building-2]"
    },
    {
      "label": "Developer tools",
      "icon": "icon-[lucide--code-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.

@pauseFires when the component emits the pause event.
@resumeFires when the component emits the resume event.
Declarative handlers.wrn
<Marquee
  @pause='console.log(payload)'
  @resume='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

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

if (component) registerOutputHandler(component, "pause", (payload) => {
  console.log("pause", payload)
})

if (component) registerOutputHandler(component, "resume", (payload) => {
  console.log("resume", 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"Marquee"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No