// Generated by scripts/generate-showcase.mjs. Do not edit directly.
layout Showcase {
  view {
    <div class="showcase-shell">
      <header class="showcase-header">
        <div class="showcase-header-start">
          <button type="button" class="docs-menu-toggle" data-docs-menu-toggle aria-label="Toggle component directory"><span class="icon-[lucide--menu] size-5" aria-hidden="true"></span></button>
          <a class="showcase-brand" href="/"><span class="showcase-brand-mark"><span class="icon-[lucide--blocks] size-4" aria-hidden="true"></span></span>WRNexus UI</a>
          <label class="docs-search"><span class="icon-[lucide--search] size-4" aria-hidden="true"></span><input type="search" placeholder="Search documentation..." data-docs-search /><kbd>⌘ K</kbd></label>
        </div>
        <div class="showcase-header-end">
          <nav aria-label="Primary navigation" class="showcase-nav"><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav>
          <button type="button" class="showcase-theme" data-design-panel-toggle aria-label="Customize design"><span class="icon-[lucide--palette] size-5" aria-hidden="true"></span></button>
        </div>
      </header>
      <aside class="design-panel" data-design-panel aria-label="Design configuration">
        <header><div><strong>Customize UI</strong><span>Changes apply to every component</span></div><button type="button" data-design-panel-toggle aria-label="Close customization"><span class="icon-[lucide--x] size-5" aria-hidden="true"></span></button></header>
        <label><span>Theme</span><select data-design-setting="style"><option value="default">Default</option><option value="soft">Soft</option><option value="sharp">Sharp</option><option value="glass">Glass</option></select></label>
        <label><span>Color</span><select data-design-setting="palette"><option value="violet">Violet</option><option value="blue">Blue</option><option value="emerald">Emerald</option><option value="rose">Rose</option><option value="amber">Amber</option><option value="cyan">Cyan</option><option value="slate">Slate</option></select></label>
        <label><span>Mode</span><select data-design-setting="mode"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></label>
        <label><span>Font</span><select data-design-setting="font"><option value="jakarta">Plus Jakarta Sans</option><option value="system">System UI</option><option value="serif">Instrument Serif</option><option value="mono">JetBrains Mono</option></select></label>
        <label><span>Size</span><select data-design-setting="scale"><option value="compact">Compact</option><option value="default">Default</option><option value="comfortable">Comfortable</option><option value="large">Large</option></select></label>
        <button class="design-reset" type="button" data-design-reset><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset configuration</button>
      </aside>
      <div class="docs-shell">
        <aside class="docs-directory" data-docs-directory>
          <nav aria-label="Documentation directory">
            <section class="docs-directory-group docs-directory-guides"><strong>Getting Started</strong><div><a href="/docs">Introduction</a><a href="/installation">Installation</a><a href="/framework-guides">Framework guides</a><a href="/accessibility">Accessibility</a><a href="/resources">Resources</a></div></section>
            <section class="docs-directory-group docs-directory-guides"><strong>WRNexusJS v0.6</strong><div><a href="/v06-types">Types</a><a href="/v06-functions">Functions</a><a href="/v06-outputs">Outputs</a><a href="/v06-stores">Stores</a><a href="/v06-imports">Imports</a><a href="/v06-state">State</a><a href="/v06-runtime">Runtime</a><a href="/v06-migration">Migration</a></div></section>
            <section class="docs-directory-group docs-directory-guides"><strong>Customization</strong><div><a href="/dark-mode">Dark Mode</a><a href="/themes">Themes <small>New</small></a><a href="/colors">Colors <small>New</small></a><a href="/fonts">Fonts</a><a href="/sizing">Sizing</a></div></section>
            
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/advanced-forms">Advanced Forms</a>
          <div><a data-docs-component-link href="/components/advanced-select">Advanced Select</a><a data-docs-component-link href="/components/combo-box">Combo Box</a><a data-docs-component-link href="/components/input-number">Input Number</a><a data-docs-component-link href="/components/pin-input">Pin Input</a><a data-docs-component-link href="/components/strong-password">Strong Password</a><a data-docs-component-link href="/components/toggle-count">Toggle Count</a><a data-docs-component-link href="/components/toggle-password">Toggle Password</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/base">Base</a>
          <div><a data-docs-component-link href="/components/accordion">Accordion</a><a data-docs-component-link href="/components/alert">Alert</a><a data-docs-component-link href="/components/avatar">Avatar</a><a data-docs-component-link href="/components/avatar-group">Avatar Group</a><a data-docs-component-link href="/components/badge">Badge</a><a data-docs-component-link href="/components/blockquote">Blockquote</a><a data-docs-component-link href="/components/button">Button</a><a data-docs-component-link href="/components/button-group">Button Group</a><a data-docs-component-link href="/components/card">Card</a><a data-docs-component-link href="/components/carousel">Carousel</a><a data-docs-component-link href="/components/chat-bubble">Chat Bubble</a><a data-docs-component-link href="/components/collapse">Collapse</a><a data-docs-component-link href="/components/date-picker">Date Picker</a><a data-docs-component-link href="/components/device-frame">Device Frame</a><a data-docs-component-link href="/components/file-upload-progress">File Upload Progress</a><a data-docs-component-link href="/components/legend-indicator">Legend Indicator</a><a data-docs-component-link href="/components/list">List</a><a data-docs-component-link href="/components/list-group">List Group</a><a data-docs-component-link href="/components/marquee">Marquee</a><a data-docs-component-link href="/components/progress">Progress</a><a data-docs-component-link href="/components/rating">Rating</a><a data-docs-component-link href="/components/skeleton">Skeleton</a><a data-docs-component-link href="/components/spinner">Spinner</a><a data-docs-component-link href="/components/styled-icon">Styled Icon</a><a data-docs-component-link href="/components/timeline">Timeline</a><a data-docs-component-link href="/components/tree-view">Tree View</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/core">Core</a>
          <div><a data-docs-component-link href="/components/auth-form">Auth Form</a><a data-docs-component-link href="/components/auth-split-layout">Auth Split Layout</a><a data-docs-component-link href="/components/portal-dashboard">Portal Dashboard</a><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/data">Data</a>
          <div><a data-docs-component-link href="/components/metric-card">Metric Card</a><a data-docs-component-link href="/components/metric-grid">Metric Grid</a><a data-docs-component-link href="/components/stats-bar">Stats Bar</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/forms">Forms</a>
          <div><a data-docs-component-link href="/components/checkbox">Checkbox</a><a data-docs-component-link href="/components/color-picker">Color Picker</a><a data-docs-component-link href="/components/file-input">File Input</a><a data-docs-component-link href="/components/input">Input</a><a data-docs-component-link href="/components/input-group">Input Group</a><a data-docs-component-link href="/components/radio">Radio</a><a data-docs-component-link href="/components/range-slider">Range Slider</a><a data-docs-component-link href="/components/search-box">Search Box</a><a data-docs-component-link href="/components/select">Select</a><a data-docs-component-link href="/components/switch">Switch</a><a data-docs-component-link href="/components/textarea">Textarea</a><a data-docs-component-link href="/components/time-picker">Time Picker</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/integrations">Integrations</a>
          <div><a data-docs-component-link href="/components/chart">Chart</a><a data-docs-component-link href="/components/clipboard">Clipboard</a><a data-docs-component-link href="/components/confetti">Confetti</a><a data-docs-component-link href="/components/data-map">Data Map</a><a data-docs-component-link href="/components/drag-and-drop">Drag And Drop</a><a data-docs-component-link href="/components/map">Map</a><a data-docs-component-link href="/components/wysiwyg-editor">Wysiwyg Editor</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/layout">Layout</a>
          <div><a data-docs-component-link href="/components/columns">Columns</a><a data-docs-component-link href="/components/container">Container</a><a data-docs-component-link href="/components/custom-scrollbar">Custom Scrollbar</a><a data-docs-component-link href="/components/divider">Divider</a><a data-docs-component-link href="/components/feature-grid">Feature Grid</a><a data-docs-component-link href="/components/footer">Footer</a><a data-docs-component-link href="/components/grid">Grid</a><a data-docs-component-link href="/components/image">Image</a><a data-docs-component-link href="/components/kbd">Kbd</a><a data-docs-component-link href="/components/layout-splitter">Layout Splitter</a><a data-docs-component-link href="/components/link">Link</a><a data-docs-component-link href="/components/public-page-shell">Public Page Shell</a><a data-docs-component-link href="/components/section">Section</a><a data-docs-component-link href="/components/section-header">Section Header</a><a data-docs-component-link href="/components/typography">Typography</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/marketing">Marketing</a>
          <div><a data-docs-component-link href="/components/announcement-bar">Announcement Bar</a><a data-docs-component-link href="/components/ctasection">CTASection</a><a data-docs-component-link href="/components/feature-card">Feature Card</a><a data-docs-component-link href="/components/feature-icon-card">Feature Icon Card</a><a data-docs-component-link href="/components/hero">Hero</a><a data-docs-component-link href="/components/hero-actions">Hero Actions</a><a data-docs-component-link href="/components/marketing-section-header">Marketing Section Header</a><a data-docs-component-link href="/components/page-header">Page Header</a><a data-docs-component-link href="/components/split-hero">Split Hero</a><a data-docs-component-link href="/components/text-link">Text Link</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/navigation">Navigation</a>
          <div><a data-docs-component-link href="/components/back-to-top">Back To Top</a><a data-docs-component-link href="/components/breadcrumb">Breadcrumb</a><a data-docs-component-link href="/components/mega-menu">Mega Menu</a><a data-docs-component-link href="/components/nav">Nav</a><a data-docs-component-link href="/components/navbar">Navbar</a><a data-docs-component-link href="/components/pagination">Pagination</a><a data-docs-component-link href="/components/scrollspy">Scrollspy</a><a data-docs-component-link href="/components/sidebar">Sidebar</a><a data-docs-component-link href="/components/stepper">Stepper</a><a data-docs-component-link href="/components/tabs">Tabs</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/overlays">Overlays</a>
          <div><a data-docs-component-link href="/components/context-menu">Context Menu</a><a data-docs-component-link href="/components/drawer">Drawer</a><a data-docs-component-link href="/components/dropdown">Dropdown</a><a data-docs-component-link href="/components/modal">Modal</a><a data-docs-component-link href="/components/popover">Popover</a><a data-docs-component-link href="/components/tooltip">Tooltip</a></div>
        </section>
        <section class="docs-directory-group">
          <a class="docs-directory-heading" href="/tables">Tables</a>
          <div><a data-docs-component-link href="/components/data-table">Data Table</a></div>
        </section>
          </nav>
          <p class="docs-directory-empty" data-docs-empty>No components found.</p>
        </aside>
        <main class="showcase-main"><slot /></main>
      </div>
    </div>
  }
}
