page Components {
  seo {
    title = "Components"
    description = "Browse all 85 themeable WRNexusJS UI components, props, slots, events, and examples."
  }
  state query = ""
  state category = "All"

  view {
    <div class="docs-shell">
      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
      <header class="topbar">
        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
      </header>
      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
      <main id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · 85 components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>85</span></button><button type="button" @click="category = 'advanced-forms'">Advanced-forms<span>9</span></button><button type="button" @click="category = 'base'">Base<span>27</span></button><button type="button" @click="category = 'forms'">Forms<span>11</span></button><button type="button" @click="category = 'integrations'">Integrations<span>12</span></button><button type="button" @click="category = 'layout'">Layout<span>10</span></button><button type="button" @click="category = 'navigation'">Navigation<span>9</span></button><button type="button" @click="category = 'overlays'">Overlays<span>6</span></button><button type="button" @click="category = 'tables'">Tables<span>1</span></button></div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid"><a class="component-card" href="/components/accordion" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'accordion accordion base theme-aware, responsive accordion component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/advanced-date-picker" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advanceddatepicker advanceddatepicker integrations theme-aware, responsive advanced date picker component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedDatePicker</h2><p>Theme-aware, responsive advanced date picker component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/advanced-range-slider" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advancedrangeslider advancedrangeslider integrations theme-aware, responsive advanced range slider component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedRangeSlider</h2><p>Theme-aware, responsive advanced range slider component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/advanced-select" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'advancedselect advancedselect advanced-forms theme-aware, responsive advanced select component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>AdvancedSelect</h2><p>Theme-aware, responsive advanced select component.</p><div class="component-card-meta"><span>51 props</span><span>0 slots</span><span>8 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/alert" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'alert alert base theme-aware, responsive alert component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/avatar" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatar avatar base theme-aware, responsive avatar component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/avatar-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatargroup avatargroup base theme-aware, responsive avatar group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>AvatarGroup</h2><p>Theme-aware, responsive avatar group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/badge" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'badge badge base theme-aware, responsive badge component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/blockquote" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'blockquote blockquote base theme-aware, responsive blockquote component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/breadcrumb" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'breadcrumb breadcrumb navigation theme-aware, responsive breadcrumb component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Breadcrumb</h2><p>Theme-aware, responsive breadcrumb component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/button" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'button button base theme-aware, responsive button component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p><div class="component-card-meta"><span>25 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/button-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'buttongroup buttongroup base theme-aware, responsive button group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ButtonGroup</h2><p>Theme-aware, responsive button group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/card" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'card card base theme-aware, responsive card component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/carousel" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'carousel carousel base theme-aware, responsive carousel component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/chart" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'chart chart integrations theme-aware, responsive chart component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Chart</h2><p>Theme-aware, responsive chart component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/chat-bubble" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'chatbubble chatbubble base theme-aware, responsive chat bubble component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ChatBubble</h2><p>Theme-aware, responsive chat bubble component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/checkbox" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'checkbox checkbox forms theme-aware, responsive checkbox component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/clipboard" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'clipboard clipboard integrations theme-aware, responsive clipboard component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Clipboard</h2><p>Theme-aware, responsive clipboard component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/collapse" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'collapse collapse base theme-aware, responsive collapse component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorpicker colorpicker forms theme-aware, responsive color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorPicker</h2><p>Theme-aware, responsive color picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/columns" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'columns columns layout theme-aware, responsive columns component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Columns</h2><p>Theme-aware, responsive columns component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/combo-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'combobox combobox advanced-forms editable autocomplete combobox with local and remote suggestions.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ComboBox</h2><p>Editable autocomplete combobox with local and remote suggestions.</p><div class="component-card-meta"><span>41 props</span><span>0 slots</span><span>8 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/confetti" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'confetti confetti integrations theme-aware, responsive confetti component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Confetti</h2><p>Theme-aware, responsive confetti component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/container" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'container container layout theme-aware, responsive container component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Container</h2><p>Theme-aware, responsive container component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/context-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'contextmenu contextmenu overlays theme-aware, responsive context menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ContextMenu</h2><p>Theme-aware, responsive context menu component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/copy-markup" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'copymarkup copymarkup advanced-forms theme-aware, responsive copy markup component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>CopyMarkup</h2><p>Theme-aware, responsive copy markup component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/custom-scrollbar" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'customscrollbar customscrollbar layout theme-aware, responsive custom scrollbar component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CustomScrollbar</h2><p>Theme-aware, responsive custom scrollbar component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/data-map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datamap datamap integrations theme-aware, responsive data map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataMap</h2><p>Theme-aware, responsive data map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/data-table" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datatable datatable integrations theme-aware, responsive data table component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataTable</h2><p>Theme-aware, responsive data table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/date-picker" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'datepicker datepicker base theme-aware, responsive date picker component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DatePicker</h2><p>Theme-aware, responsive date picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/device-frame" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'deviceframe deviceframe base theme-aware, responsive device frame component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DeviceFrame</h2><p>Theme-aware, responsive device frame component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/divider" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'divider divider layout theme-aware, responsive divider component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Divider</h2><p>Theme-aware, responsive divider component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/drag-and-drop" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'draganddrop draganddrop integrations theme-aware, responsive drag and drop component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DragAndDrop</h2><p>Theme-aware, responsive drag and drop component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/drawer" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'drawer drawer overlays theme-aware, responsive drawer component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Drawer</h2><p>Theme-aware, responsive drawer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/dropdown" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'dropdown dropdown overlays theme-aware, responsive dropdown component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Dropdown</h2><p>Theme-aware, responsive dropdown component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/file-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fileinput fileinput forms theme-aware, responsive file input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileInput</h2><p>Theme-aware, responsive file input component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/file-upload" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'fileupload fileupload integrations theme-aware, responsive file upload component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>FileUpload</h2><p>Theme-aware, responsive file upload component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/file-upload-progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'fileuploadprogress fileuploadprogress base theme-aware, responsive file upload progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>FileUploadProgress</h2><p>Theme-aware, responsive file upload progress component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/grid" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'grid grid layout theme-aware, responsive grid component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Grid</h2><p>Theme-aware, responsive grid component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/image" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'image image layout theme-aware, responsive image component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Image</h2><p>Theme-aware, responsive image component.</p><div class="component-card-meta"><span>9 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'input input forms theme-aware, responsive input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/input-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'inputgroup inputgroup forms theme-aware, responsive input group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>InputGroup</h2><p>Theme-aware, responsive input group component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/input-number" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'inputnumber inputnumber advanced-forms theme-aware, responsive input number component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>InputNumber</h2><p>Theme-aware, responsive input number component.</p><div class="component-card-meta"><span>40 props</span><span>0 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/kbd" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'kbd kbd layout theme-aware, responsive kbd component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Kbd</h2><p>Theme-aware, responsive kbd component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/layout-splitter" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'layoutsplitter layoutsplitter layout theme-aware, responsive layout splitter component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LayoutSplitter</h2><p>Theme-aware, responsive layout splitter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/legend-indicator" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'legendindicator legendindicator base theme-aware, responsive legend indicator component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>LegendIndicator</h2><p>Theme-aware, responsive legend indicator component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/link" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'link link layout theme-aware, responsive link component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Link</h2><p>Theme-aware, responsive link component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/list" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'list list base theme-aware, responsive list component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>List</h2><p>Theme-aware, responsive list component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/list-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'listgroup listgroup base theme-aware, responsive list group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ListGroup</h2><p>Theme-aware, responsive list group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'map map integrations theme-aware, responsive map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Map</h2><p>Theme-aware, responsive map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/marquee" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'marquee marquee base theme-aware, responsive marquee component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Marquee</h2><p>Theme-aware, responsive marquee component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/mega-menu" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'megamenu megamenu navigation theme-aware, responsive mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>MegaMenu</h2><p>Theme-aware, responsive mega menu component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/modal" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'modal modal overlays theme-aware, responsive modal component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Modal</h2><p>Theme-aware, responsive modal component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/nav" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'nav nav navigation theme-aware, responsive nav component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Nav</h2><p>Theme-aware, responsive nav component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/navbar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'navbar navbar navigation theme-aware, responsive navbar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Navbar</h2><p>Theme-aware, responsive navbar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/pagination" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'pagination pagination navigation theme-aware, responsive pagination component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Pagination</h2><p>Theme-aware, responsive pagination component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/pin-input" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'pininput pininput advanced-forms secure multi-cell pin and verification-code input with regex and paste support.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>PinInput</h2><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="component-card-meta"><span>26 props</span><span>0 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/popover" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'popover popover overlays theme-aware, responsive popover component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Popover</h2><p>Theme-aware, responsive popover component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'progress progress base theme-aware, responsive progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Progress</h2><p>Theme-aware, responsive progress component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/radio" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'radio radio forms theme-aware, responsive radio component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/range-slider" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rangeslider rangeslider forms theme-aware, responsive range slider component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RangeSlider</h2><p>Theme-aware, responsive range slider component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/rating" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'rating rating base theme-aware, responsive rating component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/scrollspy" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'scrollspy scrollspy navigation theme-aware, responsive scrollspy component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Scrollspy</h2><p>Theme-aware, responsive scrollspy component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/search-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'searchbox searchbox advanced-forms theme-aware, responsive search box component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>SearchBox</h2><p>Theme-aware, responsive search box component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/select" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'select select forms theme-aware, responsive select component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/sidebar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'sidebar sidebar navigation theme-aware, responsive sidebar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Sidebar</h2><p>Theme-aware, responsive sidebar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/skeleton" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'skeleton skeleton base theme-aware, responsive skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Skeleton</h2><p>Theme-aware, responsive skeleton component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/spinner" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'spinner spinner base theme-aware, responsive spinner component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Spinner</h2><p>Theme-aware, responsive spinner component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/stepper" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'stepper stepper navigation theme-aware, responsive stepper component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Stepper</h2><p>Theme-aware, responsive stepper component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/strong-password" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'strongpassword strongpassword advanced-forms theme-aware, responsive strong password component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>StrongPassword</h2><p>Theme-aware, responsive strong password component.</p><div class="component-card-meta"><span>27 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/styled-icon" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'styledicon styledicon base theme-aware, responsive styled icon component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>StyledIcon</h2><p>Theme-aware, responsive styled icon component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/switch" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'switch switch forms theme-aware, responsive switch component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/table" data-show="(category === 'All' ? true : category === 'tables') ? (query === '' ? true : 'table table tables theme-aware, responsive table component.'.includes(query.toLowerCase())) : false"><span class="category">tables</span><h2>Table</h2><p>Theme-aware, responsive table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/tabs" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'tabs tabs navigation theme-aware, responsive tabs component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Tabs</h2><p>Theme-aware, responsive tabs component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/textarea" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'textarea textarea forms theme-aware, responsive textarea component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/timeline" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'timeline timeline base theme-aware, responsive timeline component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Timeline</h2><p>Theme-aware, responsive timeline component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timepicker timepicker forms theme-aware, responsive time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimePicker</h2><p>Theme-aware, responsive time picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/toast" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'toast toast base theme-aware, responsive toast component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Toast</h2><p>Theme-aware, responsive toast component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/toast-notifications" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'toastnotifications toastnotifications integrations theme-aware, responsive toast notifications component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>ToastNotifications</h2><p>Theme-aware, responsive toast notifications component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/toggle-count" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglecount togglecount advanced-forms theme-aware, responsive toggle count component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ToggleCount</h2><p>Theme-aware, responsive toggle count component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/toggle-password" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglepassword togglepassword advanced-forms accessible password field with optional show and hide controls.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>TogglePassword</h2><p>Accessible password field with optional show and hide controls.</p><div class="component-card-meta"><span>24 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/tooltip" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'tooltip tooltip overlays theme-aware, responsive tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Tooltip</h2><p>Theme-aware, responsive tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/tree-view" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'treeview treeview base theme-aware, responsive tree view component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>TreeView</h2><p>Theme-aware, responsive tree view component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/typography" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'typography typography layout theme-aware, responsive typography component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Typography</h2><p>Theme-aware, responsive typography component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
<a class="component-card" href="/components/wysiwyg-editor" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'wysiwygeditor wysiwygeditor integrations theme-aware, responsive wysiwyg editor component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>WysiwygEditor</h2><p>Theme-aware, responsive wysiwyg editor component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a></section></main>
      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
      <BackToTop />
    </div>
  }
}