// Generated by scripts/generate-showcase.mjs. Do not edit directly. page TabsDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Tabs" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"tabs-0-1\",\"key\":\"tabs-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\":\"#tabs-demo\",\"actionHref\":\"#tabs-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\":\"tabs-0-2\",\"key\":\"tabs-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#tabs-demo\",\"actionHref\":\"#tabs-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_active = ctx.url.searchParams.get("pg_active") ?? "" state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Tabs" description = "Switch between related responsive content panels with horizontal or vertical orientation and selection events." } view {
Navigation component

Tabs

Switch between related responsive content panels with horizontal or vertical orientation and selection events.

7 props1 slots0 outputsTheme readyResponsive
Interactive playground

Configure Tabs

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

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

Horizontal content tabs

Switch between related content panels without navigating away.

01
Live preview
Component usage.wrn
<Tabs
  label="Service information"
  items='[
    {
      "label": "Overview",
      "value": "overview",
      "content": "Overview content"
    },
    {
      "label": "Requirements",
      "value": "requirements",
      "content": "Requirements content"
    },
    {
      "label": "Process",
      "value": "process",
      "content": "Process content"
    }
  ]'
  active="overview"
/>
Compact

Compact application tabs

Use smaller tabs in dashboards, panels, and dense product interfaces.

02
Live preview
Component usage.wrn
<Tabs
  size="sm"
  label="Record views"
  items='[
    {
      "label": "Details",
      "value": "details"
    },
    {
      "label": "History",
      "value": "history"
    },
    {
      "label": "Files",
      "value": "files"
    }
  ]'
  active="details"
/>
Advanced

Vertical settings tabs

Use vertical tabs for settings, configuration, and long-form navigation.

03
Live preview
Component usage.wrn
<Tabs
  size="lg"
  label="Settings"
  items='[
    {
      "label": "Profile",
      "value": "profile",
      "icon": "icon-[lucide--user]"
    },
    {
      "label": "Security",
      "value": "security",
      "icon": "icon-[lucide--shield]"
    },
    {
      "label": "Notifications",
      "value": "notifications",
      "icon": "icon-[lucide--bell]"
    }
  ]'
  active="security"
  orientation="vertical"
/>
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
labelstring"Tabs"No
itemsunknown[][]No
activestring""No
orientationstring"horizontal"No
classstring""No
} }