Volt Ui

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <title>Volt UI</title>
    <base href="/">
    <script>
      // Applies the visitor's saved theme before first paint so there is no
      // flash of the default (volt/sharp/light) theme while Angular loads.
      // This mirrors src/app/components/theme-switcher.ts's localStorage
      // keys; keep both in sync if those keys ever change. Runs unguarded
      // because it only ever executes in the browser (a raw <script> tag
      // is never evaluated by Angular's server renderer, just serialized).
      (function () {
        try {
          var root = document.documentElement;
          var color = localStorage.getItem('volt-color');
          var style = localStorage.getItem('volt-style');
          var dark = localStorage.getItem('volt-dark') === 'true';
          if (color) root.setAttribute('data-color', color);
          if (style) root.setAttribute('data-style', style);
          if (dark) {
            root.classList.add('dark');
            root.style.colorScheme = 'dark';
          }
        } catch (e) {
          // localStorage may be unavailable (private browsing, blocked
          // storage) — fall back to the default theme, no worse than today.
        }
      })();
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
    <script type="module" crossorigin="" src="/assets/index-CJiictn1.js"></script>
    <link rel="stylesheet" crossorigin="" href="/assets/index-BR2D9J_p.css">
  <style>.lmn-filled[_nghost-ng-c1530450384]   svg[_ngcontent-ng-c1530450384]{fill:color-mix(in oklab,currentColor 24%,transparent)}.lmn-animate-el[_ngcontent-ng-c1530450384]{display:inline-block}@keyframes _ngcontent-ng-c1530450384_lmn-github{0%,to{translate:0 0px;scale:1;rotate:0deg}50%{translate:0 0px;scale:1;rotate:1.14deg}}</style><style>.lmn-filled[_nghost-ng-c2473854282]   svg[_ngcontent-ng-c2473854282]{fill:color-mix(in oklab,currentColor 24%,transparent)}.lmn-animate-el[_ngcontent-ng-c2473854282]{display:inline-block}@keyframes _ngcontent-ng-c2473854282_lmn-menu{0%,to{scale:1 1}50%{scale:.932 1}}</style><style>.lmn-filled[_nghost-ng-c334245325]   svg[_ngcontent-ng-c334245325]{fill:color-mix(in oklab,currentColor 24%,transparent)}.lmn-animate-el[_ngcontent-ng-c334245325]{display:inline-block}@keyframes _ngcontent-ng-c334245325_lmn-sun{0%,to{scale:1}50%{scale:1.019}}</style></head>
  <body><!--nghm-->
    <app-root ng-version="21.2.17" ngh="5" ng-server-context="other"><div class="min-h-screen flex flex-col bg-background text-foreground font-sans transition-colors duration-200 selection:bg-primary/20 relative"><div class="fixed inset-0 overflow-hidden pointer-events-none z-0"><div class="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] rounded-[100%] bg-primary/20 blur-[120px] mix-blend-screen opacity-50"></div><div class="absolute top-[60%] -right-[10%] w-[40%] h-[60%] rounded-[100%] bg-primary/20 blur-[120px] mix-blend-screen opacity-30"></div></div><app-header ngh="4"><header class="sticky top-0 z-50 bg-background/70 backdrop-blur-xl border-b border-border/40"><div class="max-w-6xl mx-auto px-4 sm:px-6 h-14 sm:h-16 flex items-center justify-between gap-2"><div class="flex items-center gap-4"><a routerlink="/" class="flex items-center gap-2 hover:opacity-80 transition-opacity" href="/" jsaction="click:;"><div class="flex items-center justify-center w-8 h-8 rounded-lg overflow-hidden relative shadow-[0_0_15px_rgba(var(--color-primary),0.5)]"><div class="absolute inset-0 bg-primary opacity-20"></div><img src="favicon.svg" alt="Volt UI Logo" class="w-full h-full object-cover relative z-10"></div><span class="text-xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/60 hidden sm:inline-flex"> Volt UI </span></a><volt-badge variant="secondary" class="font-mono text-xs hidden md:inline-flex border-none shadow-sm ring-1 ring-border/50 bg-muted border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring font-medium items-center px-2.5 py-0.5 rounded-full text-foreground transition-colors" ngh="0"> v1.0.0 </volt-badge></div><div class="flex items-center gap-2 sm:gap-3"><nav class="hidden md:flex gap-1 text-sm font-medium text-muted-foreground mr-1"><a routerlink="/" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/" jsaction="click:;"> Home </a><a routerlink="/docs/introduction" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/docs/introduction" jsaction="click:;"> Docs </a><a routerlink="/docs/components" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/docs/components" jsaction="click:;"> Components </a><a routerlink="/create-theme" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/create-theme" jsaction="click:;"> Create Theme </a><a routerlink="/docs/layouts" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/docs/layouts" jsaction="click:;"> Layouts </a></nav><a href="https://github.com/andersseen/volt-ui" target="_blank" rel="noreferrer" aria-label="GitHub repository" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-border/60 text-muted-foreground transition-colors hover:text-foreground hover:bg-muted/60"><lmn-github _nghost-ng-c1530450384="" style="display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;" class="" aria-hidden="true" ngh="0"><svg _ngcontent-ng-c1530450384="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" class="" width="20" height="20"><path _ngcontent-ng-c1530450384="" d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.1.68-.22.68-.48 0-.24-.01-1.04-.01-1.88-2.78.62-3.37-1.22-3.37-1.22-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .08 1.53 1.06 1.53 1.06.9 1.56 2.35 1.11 2.92.85.09-.67.35-1.11.63-1.37-2.22-.26-4.55-1.14-4.55-5.08 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.33 9.33 0 0 1 12 6.88c.85 0 1.7.12 2.5.36 1.9-1.33 2.74-1.05 2.74-1.05.55 1.4.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.95-2.34 4.82-4.57 5.07.36.33.68.98.68 1.98 0 1.43-.01 2.58-.01 2.93 0 .27.18.59.69.48A10.23 10.23 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z"></path></svg></lmn-github></a><app-theme-switcher ngh="2"><div class="flex items-center gap-2 sm:gap-3"><div class="hidden lg:flex items-center gap-2"><div class="w-[130px] xl:w-[140px]"><volt-select placeholder="Theme Color" class="block w-full" ngh="1"><button role="combobox" ngpselect="" type="button" class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background cursor-pointer placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1" id="ngp-select-2" aria-expanded="false" tabindex="0" jsaction="click:;keydown:;blur:;"><span class="block text-left truncate flex-1 pointer-events-none"> volt <!----><!----></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50 shrink-0 pointer-events-none"><path d="m6 9 6 6 6-6"></path></svg></button><!----></volt-select></div></div><div class="hidden xl:flex items-center gap-2"><div class="w-[120px]"><volt-select placeholder="Style" class="block w-full" ngh="1"><button role="combobox" ngpselect="" type="button" class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background cursor-pointer placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1" id="ngp-select-3" aria-expanded="false" tabindex="0" jsaction="click:;keydown:;blur:;"><span class="block text-left truncate flex-1 pointer-events-none"> sharp <!----><!----></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50 shrink-0 pointer-events-none"><path d="m6 9 6 6 6-6"></path></svg></button><!----></volt-select></div></div><button type="button" aria-label="Toggle dark mode" class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-input bg-surface hover:bg-muted text-sm" jsaction="click:;"><!----><lmn-sun _nghost-ng-c334245325="" style="display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;" class="" aria-hidden="true" ngh="0"><svg _ngcontent-ng-c334245325="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="20" height="20" stroke-width="2"><circle _ngcontent-ng-c334245325="" cx="12" cy="12" r="4" class="lmn-animate-el"></circle><path _ngcontent-ng-c334245325="" d="M12 2v2" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M12 20v2" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M4.93 4.93l1.41 1.41" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M17.66 17.66l1.41 1.41" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M2 12h2" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M20 12h2" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M6.34 17.66l-1.41 1.41" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M19.07 4.93l-1.41 1.41" class="lmn-animate-el"></path></svg></lmn-sun><!----></button></div></app-theme-switcher><app-mobile-menu ngh="3"><button aria-label="Open menu" class="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-md border border-border/60 text-muted-foreground transition-colors hover:text-foreground hover:bg-muted/60" jsaction="click:;"><lmn-menu _nghost-ng-c2473854282="" style="display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;" class="" aria-hidden="true" ngh="0"><svg _ngcontent-ng-c2473854282="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="20" height="20" stroke-width="2"><line _ngcontent-ng-c2473854282="" x1="4" x2="20" y1="6" y2="6" class="lmn-animate-el"></line><line _ngcontent-ng-c2473854282="" x1="4" x2="20" y1="12" y2="12" class="lmn-animate-el"></line><line _ngcontent-ng-c2473854282="" x1="4" x2="20" y1="18" y2="18" class="lmn-animate-el"></line></svg></lmn-menu></button><!----></app-mobile-menu></div></div></header></app-header><main class="flex-grow"><router-outlet></router-outlet><!----></main><app-footer ngh="0"><footer class="border-t border-border/50 bg-muted/15 py-10 relative z-10"><div class="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col md:flex-row justify-between items-center gap-5 text-sm text-muted-foreground"><div class="flex items-center gap-3"><img src="favicon.svg" alt="" class="h-7 w-7 rounded-lg"><div><p class="font-medium text-foreground">Volt UI</p><p class="text-xs">Angular components you own.</p></div></div><div class="flex items-center gap-5"><a routerlink="/docs/introduction" class="hover:text-foreground transition-colors" href="/docs/introduction" jsaction="click:;">Docs</a><a routerlink="/docs/components" class="hover:text-foreground transition-colors" href="/docs/components" jsaction="click:;">Components</a><span class="hidden sm:inline">© 2026</span><a href="https://github.com/Andersseen/volt-ui" target="_blank" rel="noreferrer" aria-label="GitHub repository" class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border/60 hover:text-foreground transition-colors"><lmn-github _nghost-ng-c1530450384="" style="display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;" class="" aria-hidden="true" ngh="0"><svg _ngcontent-ng-c1530450384="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" class="" width="16" height="16"><path _ngcontent-ng-c1530450384="" d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.1.68-.22.68-.48 0-.24-.01-1.04-.01-1.88-2.78.62-3.37-1.22-3.37-1.22-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .08 1.53 1.06 1.53 1.06.9 1.56 2.35 1.11 2.92.85.09-.67.35-1.11.63-1.37-2.22-.26-4.55-1.14-4.55-5.08 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.33 9.33 0 0 1 12 6.88c.85 0 1.7.12 2.5.36 1.9-1.33 2.74-1.05 2.74-1.05.55 1.4.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.95-2.34 4.82-4.57 5.07.36.33.68.98.68 1.98 0 1.43-.01 2.58-.01 2.93 0 .27.18.59.69.48A10.23 10.23 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z"></path></svg></lmn-github></a></div></div></footer></app-footer></div></app-root>
    <script type="text/javascript" id="ng-event-dispatch-contract">(()=>{function p(t,n,r,o,e,i,f,m){return{eventType:t,event:n,targetElement:r,eic:o,timeStamp:e,eia:i,eirp:f,eiack:m}}function u(t){let n=[],r=e=>{n.push(e)};return{c:t,q:n,et:[],etc:[],d:r,h:e=>{r(p(e.type,e,e.target,t,Date.now()))}}}function s(t,n,r){for(let o=0;o<n.length;o++){let e=n[o];(r?t.etc:t.et).push(e),t.c.addEventListener(e,t.h,r)}}function c(t,n,r,o,e=window){let i=u(t);e._ejsas||(e._ejsas={}),e._ejsas[n]=i,s(i,r),s(i,o,!0)}window.__jsaction_bootstrap=c;})();
</script><script>window.__jsaction_bootstrap(document.body,"ng",["click","keydown"],["blur"]);</script>
  

<script id="ng-state" type="application/json">{"__nghData__":[{},{"t":{"2":"t0","3":"t1","6":"t2"},"c":{"2":[{"i":"t0","r":1}],"3":[],"6":[]}},{"d":[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,30,31,32,33,34,35,36,37,38,39,40,41,42],"t":{"44":"t3","45":"t4"},"c":{"44":[],"45":[{"i":"t4","r":1}]}},{"t":{"2":"t5"},"c":{"2":[]}},{"n":{"10":"9f"}},{"c":{"6":[]}}]}</script></body></html>