PageSourceSearch

https://winduum.netlify.app/docs/about

html winduum.netlify.app collected 2026-10-03 11:36:50 UTC 52,067 bytes, 50 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-US" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=26578512-ce20-4f2e-9e0b-2f4985eecf21
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width,initial-scale=1">
9    <title>About | Winduum</title>
10    <meta name="description" content="Modern, modular, small modest CSS component framework built on top of TailwindCSS">
11    <meta name="generator" content="VitePress v2.0.0-alpha.16">
12    <link rel="preload stylesheet" href="/assets/style.CG7FDbU2.css" as="style">
13    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
14    
15    
15<script type="module" src="/assets/app.IlBFUgDl.js"></script>
15
16    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
17    <link rel="modulepreload" href="/assets/chunks/theme.DscXMsqQ.js">
18    <link rel="modulepreload" href="/assets/chunks/framework.DXkzjxsl.js">
19    <link rel="modulepreload" href="/assets/docs_about.md.C9EvNJgD.lean.js">
20    <link rel="icon" type="image/svg+xml" href="/logo.svg">
21    <meta property="og:type" content="website">
22    <meta property="og:title" content="Winduum">
23    <meta property="og:image" content="https://winduum.dev/og-image.png">
24    <meta property="og:url" content="https://winduum.dev">
25    <meta property="og:description" content="Modern, modular, small modest CSS component framework built on top of TailwindCSS">
26    <meta name="twitter:card" content="summary_large_image">
27    <meta name="twitter:site" content="@winduum_dev">
28    <meta name="theme-color" content="#2d55ff">
29    
29<script defer data-domain="winduum.dev" src="https://plausible.newlogic.cz/js/script.outbound-links.js"></script>
29
30    
30<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
30
31    
31<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
31
32  </head>
33  <body>
34    <div id="app"><div class="Layout" data-v-1df9f90f><!--[--><!--]--><!--[--><span tabindex="-1" data-v-331ec75c></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-331ec75c>Skip to content</a><!--]--><!----><header class="VPNav" data-v-1df9f90f data-v-9f75dce3><div class="VPNavBar has-sidebar top" data-v-9f75dce3 data-v-9ca1369d><div class="wrapper" data-v-9ca1369d><div class="container" data-v-9ca1369d><div class="title" data-v-9ca1369d><div class="VPNavBarTitle has-sidebar" data-v-9ca1369d data-v-1e38c6bc><a class="title" href="/" data-v-1e38c6bc><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.svg" alt data-v-8426fc1a><!--]--><span data-v-1e38c6bc>Winduum</span><!--[--><!--]--></a></div></div><div class="content" data-v-9ca1369d><div class="content-body" data-v-9ca1369d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9ca1369d data-v-2fc7f2c6><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-2fc7f2c6 data-v-baa3be99><span class="vpi-search" aria-hidden="true" data-v-baa3be99></span><span class="text" data-v-baa3be99>Search</span><span class="keys" aria-hidden="true" data-v-baa3be99><kbd class="key-cmd" data-v-baa3be99>⌘</kbd><kbd class="key-ctrl" data-v-baa3be99>Ctrl</kbd><kbd data-v-baa3be99>K</kbd></span></button><!----><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9ca1369d data-v-39714824><span id="main-nav-aria-label" class="visually-hidden" data-v-39714824> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/docs/" tabindex="0" data-v-39714824 data-v-52a1d768><!--[--><span data-v-52a1d768>Docs</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-39714824 data-v-42cb505d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-42cb505d><span class="text" data-v-42cb505d><!----><span data-v-42cb505d>Resources</span><span class="vpi-chevron-down text-icon" data-v-42cb505d></span></span></button><div class="menu" data-v-42cb505d><div class="VPMenu" data-v-42cb505d data-v-25a6cce8><div class="items" data-v-25a6cce8><!--[--><!--[--><div class="VPMenuGroup" data-v-25a6cce8 data-v-1963e1bb><!----><!--[--><!--[--><div class="VPMenuLink" data-v-1963e1bb data-v-faf5b206><a class="VPLink link vp-external-link-icon" href="https://tailwindcss.com" target="_blank" rel="noreferrer" data-v-faf5b206><!--[--><span data-v-faf5b206>TailwindCSS</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1963e1bb data-v-faf5b206><a class="VPLink link vp-external-link-icon" href="https://github.com/winduum/winduum/blob/main/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-faf5b206><!--[--><span data-v-faf5b206>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1963e1bb data-v-faf5b206><a class="VPLink link vp-external-link-icon" href="https://v1--winduum.netlify.app/" target="_blank" rel="noreferrer" data-v-faf5b206><!--[--><span data-v-faf5b206>v1</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9ca1369d data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9ca1369d data-v-0394ad82 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://github.com/winduum/winduum" aria-label="github" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://twitter.com/winduum_dev" aria-label="twitter" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-twitter"></span></a>
34<!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9ca1369d data-v-bf2fac68 data-v-42cb505d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-42cb505d><span class="vpi-more-horizontal icon" data-v-42cb505d></span></button><div class="menu" data-v-42cb505d><div class="VPMenu" data-v-42cb505d data-v-25a6cce8><!----><!--[--><!--[--><!----><div class="group" data-v-bf2fac68><div class="item appearance" data-v-bf2fac68><p class="label" data-v-bf2fac68>Appearance</p><div class="appearance-action" data-v-bf2fac68><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bf2fac68 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bf2fac68><div class="item social-links" data-v-bf2fac68><div class="VPSocialLinks social-links-list" data-v-bf2fac68 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://github.com/winduum/winduum" aria-label="github" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://twitter.com/winduum_dev" aria-label="twitter" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-twitter"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9ca1369d data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-9ca1369d><div class="divider-line" data-v-9ca1369d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-1df9f90f data-v-db738f89><div class="container" data-v-db738f89><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-db738f89><span class="vpi-align-left menu-icon" data-v-db738f89></span><span class="menu-text" data-v-db738f89>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-db738f89 data-v-0bf0e06f><button data-v-0bf0e06f>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-1df9f90f data-v-af661f50><div class="curtain" data-v-af661f50></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af661f50><span class="visually-hidden" id="sidebar-aria-label" data-v-af661f50> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0 has-active" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Get started</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/docs/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Install</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/about'><!--[--><p class="text" data-v-d81de50c>About</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/colors'><!--[--><p class="text" data-v-d81de50c>Colors</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/icons'><!--[--><p class="text" data-v-d81de50c>Icons</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/grid'><!--[--><p class="text" data-v-d81de50c>Grid</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/layers'><!--[--><p class="text" data-v-d81de50c>Layers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/tokens'><!--[--><p class="text" data-v-d81de50c>Tokens</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Base</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/base/config'><!--[--><p class="text" data-v-d81de50c>Config</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/base/theme'><!--[--><p class="text" data-v-d81de50c>Theme</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/base/reset'><!--[--><p class="text" data-v-d81de50c>Reset</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/base/defaults'><!--[--><p class="text" data-v-d81de50c>Defaults</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/base/breakpoints'><!--[--><p class="text" data-v-d81de50c>Breakpoints</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/base/keyframes'><!--[--><p class="text" data-v-d81de50c>Keyframes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/base/transitions'><!--[--><p class="text" data-v-d81de50c>Transitions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Components</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/badge'><!--[--><p class="text" data-v-d81de50c>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/breadcrumb'><!--[--><p class="text" data-v-d81de50c>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/button'><!--[--><p class="text" data-v-d81de50c>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/card'><!--[--><p class="text" data-v-d81de50c>Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/carousel'><!--[--><p class="text" data-v-d81de50c>
34Carousel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/check'><!--[--><p class="text" data-v-d81de50c>Check</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/color'><!--[--><p class="text" data-v-d81de50c>Color</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/compare'><!--[--><p class="text" data-v-d81de50c>Compare</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/control'><!--[--><p class="text" data-v-d81de50c>Control</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/details'><!--[--><p class="text" data-v-d81de50c>Details</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/dialog'><!--[--><p class="text" data-v-d81de50c>Dialog</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/drawer'><!--[--><p class="text" data-v-d81de50c>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/field'><!--[--><p class="text" data-v-d81de50c>Field</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/form'><!--[--><p class="text" data-v-d81de50c>Form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/group'><!--[--><p class="text" data-v-d81de50c>Group</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/heading'><!--[--><p class="text" data-v-d81de50c>Heading</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/image'><!--[--><p class="text" data-v-d81de50c>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/info'><!--[--><p class="text" data-v-d81de50c>Info</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/label'><!--[--><p class="text" data-v-d81de50c>Label</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/link'><!--[--><p class="text" data-v-d81de50c>Link</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/notice'><!--[--><p class="text" data-v-d81de50c>Notice</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/pagination'><!--[--><p class="text" data-v-d81de50c>Pagination</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/popover'><!--[--><p class="text" data-v-d81de50c>Popover</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/progress'><!--[--><p class="text" data-v-d81de50c>Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/range'><!--[--><p class="text" data-v-d81de50c>Range</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/rating'><!--[--><p class="text" data-v-d81de50c>Rating</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/switch'><!--[--><p class="text" data-v-d81de50c>Switch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/table'><!--[--><p class="text" data-v-d81de50c>Table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/tabs'><!--[--><p class="text" data-v-d81de50c>Tabs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/text'><!--[--><p class="text" data-v-d81de50c>Text</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/title'><!--[--><p class="text" data-v-d81de50c>Title</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/toast'><!--[--><p class="text" data-v-d81de50c>Toast</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/toaster'><!--[--><p class="text" data-v-d81de50c>Toaster</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/components/tooltip'><!--[--><p class="text" data-v-d81de50c>Tooltip</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Utilities</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/accent'><!--[--><p class="text" data-v-d81de50c>Accent</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/animation'><!--[--><p class="text" data-v-d81de50c>Animation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/container'><!--[--><p class="text" data-v-d81de50c>Container</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/divide-gap'><!--[--><p class="text" data-v-d81de50c>Divide Gap</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/divider'><!--[--><p class="text" data-v-d81de50c>Divider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/dot'><!--[--><p class="text" data-v-d81de50c>
34Dot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/skeleton'><!--[--><p class="text" data-v-d81de50c>Skeleton</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/spinner'><!--[--><p class="text" data-v-d81de50c>Spinner</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/swap'><!--[--><p class="text" data-v-d81de50c>Swap</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/ripple'><!--[--><p class="text" data-v-d81de50c>Ripple</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class='VPLink link link' data-v-d81de50c href='/docs/utilities/underline'><!--[--><p class="text" data-v-d81de50c>Underline</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-1df9f90f data-v-c87f25bf><div class="VPDoc has-sidebar has-aside" data-v-c87f25bf data-v-7011f0d8><!--[--><!--]--><div class="container" data-v-7011f0d8><div class="aside" data-v-7011f0d8><div class="aside-curtain" data-v-7011f0d8></div><div class="aside-container" data-v-7011f0d8><div class="aside-content" data-v-7011f0d8><div class="VPDocAside" data-v-7011f0d8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-60d5052e><div class="content" data-v-60d5052e><div class="outline-marker" data-v-60d5052e></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-60d5052e>On this page</div><ul class="VPDocOutlineItem root" data-v-60d5052e data-v-1ce71065><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-7011f0d8><div class="content-container" data-v-7011f0d8><!--[--><!--]--><main class="main" data-v-7011f0d8><div style="position:relative;" class="vp-doc _docs_about" data-v-7011f0d8><div><div style="display:none;" hidden="true" aria-hidden="true">Are you an LLM? You can read better optimized documentation at /docs/about.md for this page in Markdown format</div><h1 id="about" tabindex="-1">About <a class="header-anchor" href="#about" aria-label="Permalink to “About”">​</a></h1><p>Winduum is a mix of words <strong>Tailwind</strong> <em>(Popular CSS utility framework)</em> and <strong>Tuum</strong> <em>(Estonian word for &quot;core&quot;)</em>.</p><p>It essentially provides ways to leverage use of <strong>modern and accessible standards</strong> as much possible. Because we ❤️ CSS and this is a small modest CSS component framework.</p><p>Its approach to <strong>TailwindCSS</strong> is a little different. It encourages writing components in CSS or other (pre/post)-processors and to use utility classes to enhance the components.</p><p>As a CSS library, it provides beautifully styled accessible components. Which you can extend with your own components.</p><p>It is very modular and split to <code>base</code>, <code>components</code> and <code>utilities</code> layers.</p><p>You can choose what you want to use and make your own complex UX/UI project written in whatever you want.</p><h2 id="why" tabindex="-1">Why? <a class="header-anchor" href="#why" aria-label="Permalink to “Why?”">​</a></h2><p>The question inevitably arises: Why introduce yet another UI component library into the mix? Simply because Winduum is different in a few areas than the others.</p><ol><li>
34It focuses on web standards, accessibility and minimum simple code</li><li>It&#39;s progressive, uses modern features and standards</li><li>It&#39;s framework-agnostic, so it can be used in any scenario</li><li>Its source code is plain CSS and JS, so it can be also used without a build step</li></ol><h2 id="framework-agnostic" tabindex="-1">Framework-agnostic <a class="header-anchor" href="#framework-agnostic" aria-label="Permalink to “Framework-agnostic”">​</a></h2><p>Winduum is <strong>framework-agnostic</strong>, so you are able to create your own components using your preferred framework. Javascript primitives can be also adapted in any framework.</p><p>If there is interest, pre-built components may be developed for popular frameworks. Currently, only <a href="https://www.github.com/winduum/winduum-vue" target="_blank" rel="noreferrer"><code>winduum-vue</code></a> and <a href="https://www.github.com/winduum/winduum-react" target="_blank" rel="noreferrer"><code>winduum-react</code></a> are available and most of the components have usage and installation examples in the docs.</p><p>Want to help? We&#39;re open for pull requests!</p><h2 id="modern-css-features" tabindex="-1">Modern CSS Features <a class="header-anchor" href="#modern-css-features" aria-label="Permalink to “Modern CSS Features”">​</a></h2><p>Staying ahead of the curve, Winduum leverages modern CSS features, allowing you to harness the power of the latest specifications and improve overall styling capabilities. All of these are supported in current browsers.</p><ul><li><strong>CSS Properties</strong></li><li><strong>CSS Logical Properties</strong></li><li><strong>CSS Nesting</strong></li><li><strong>CSS color-mix</strong></li><li><strong>Modern pseudo selectors</strong> such as <code>:where</code>, <code>:is</code> and <code>:has</code></li><li><strong>Modern CSS reset</strong></li><li><strong>View Transition API, Dialog API, Popover API</strong> and more!</li><li><strong>Low specifity or layers</strong></li></ul><p><strong>Winduum</strong> is all about accessibility and web standards that can be used in any framework.</p><h2 id="naming" tabindex="-1">Naming <a class="header-anchor" href="#naming" aria-label="Permalink to “Naming”">​</a></h2><p>In your projects it&#39;s recommended to prefix component classes for better clarity. Some of these are already used for various components.</p><ul><li><strong>Component</strong> - <code>x-name</code> (with prefix, every component is prefixed)</li><li><strong>Utilities</strong> - <code>name</code> (without prefix, utility classes for common styles)</li></ul><h2 id="css-properties" tabindex="-1">CSS Properties <a class="header-anchor" href="#css-properties" aria-label="Permalink to “CSS Properties”">​</a></h2><p>Each CSS property follows the same naming, for example <code>--x-name-font-size</code></p><h2 id="directory-structure" tabindex="-1">Directory structure <a class="header-anchor" href="#directory-structure" aria-label="Permalink to “Directory structure”">​</a></h2><p>To help navigate your project easily, it&#39;s recommended to follow the same naming principles for your directory structure, for example, like this:</p><ul><li>📁 <strong>base</strong></li><li>📁 <strong>components</strong></li><li>📁 <strong>theme</strong></li><li>📁 <strong>utilities</strong> or <strong>utils</strong></li></ul><h2 id="examples" tabindex="-1">Examples <a class="header-anchor" href="#examples" aria-label="Permalink to “Examples”">​</a></h2><h3 id="using-the-components" tabindex="-1">Using the components <a class="header-anchor" href="#using-the-components" aria-label="Permalink to “Using the components”">​</a></h3><p>You can use any of the components easily in HTML without the need to write complex TailwindCSS classes.</p><p>Each component is written with low specificity in mind, so any property can be easily enhanced with TailwindCSS utility classes.</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-177" id="tab-178" checked><label data-title="html" for="tab-178">html</label><input type="radio" name="group-177" id="tab-179"><label data-title="css" for="tab-179">css</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span>
34<pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x-button accent-main&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;This is a Button&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.x-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
35<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">    --x-button-font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.875</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
36<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    </span></span>
37<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* CSS styles */</span></span>
38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div></div><h3 id="writing-the-components" tabindex="-1">Writing the components <a class="header-anchor" href="#writing-the-components" aria-label="Permalink to “Writing the components”">​</a></h3><p>You can write your own components using the same approach</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-187" id="tab-188" checked><label data-title="html" for="tab-188">html</label><input type="radio" name="group-187" id="tab-189"><label data-title="css" for="tab-189">css</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x-hello-world bg-dark rounded-md&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hello world&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.x-hello-world</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
39<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">    --x-hello-world-font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
40<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    </span></span>
41<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* CSS styles */</span></span>
42<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div></div><p>It&#39;s recommended to use TailwindCSS utility classes for most cases. If you want to style some elements in CSS inside the component, consider creating a new component.</p><p>If you don&#39;t want to create a new component, don&#39;t use complex conventions like BEM. It&#39;s recommended to use something like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part" target="_blank" rel="noreferrer">part</a> attribute. For example <code>data-part=&quot;body&quot;</code></p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span>
42<pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.x-hello-world</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
43<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :where([data-part~</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;body&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) {</span></span>
44<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* CSS styles */</span></span>
45<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
46<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>This way you can tell that it&#39;s an element related to the parent component.</p><p>In rare cases you want to prevent possible class conflicts you can add name of the component inside the class like this <code>x-hello-world:body</code>.</p></div></div></main><footer class="VPDocFooter" data-v-7011f0d8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><div class="edit-link" data-v-e257564d><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/winduum/winduum-docs/edit/main/docs/docs/about.md" target="_blank" rel="noreferrer" data-v-e257564d><!--[--><span class="vpi-square-pen edit-link-icon" data-v-e257564d></span> Suggest changes to this page<!--]--></a></div><!----></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/docs/" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Install</span><!--]--></a></div><div class="pager" data-v-e257564d><a class='VPLink link pager-link next' data-v-e257564d href='/docs/colors'><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Colors</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-1df9f90f data-v-c3855bb3><div class="container" data-v-c3855bb3><p class="message" data-v-c3855bb3>Released under the MIT License.</p><p class="copyright" data-v-c3855bb3>Copyright © 2022-present lubomirblazek.cz</p></div></footer><!--[--><!--]--></div></div>
47    
47<script>window.__VP_HASH_MAP__=JSON.parse("{\"docs_about.md\":\"C9EvNJgD\",\"docs_base_breakpoints.md\":\"CgNx2iYh\",\"docs_base_config.md\":\"BNC14pzW\",\"docs_base_defaults.md\":\"B6A8EqW6\",\"docs_base_keyframes.md\":\"B8kmcVl6\",\"docs_base_reset.md\":\"DyYe20lE\",\"docs_base_theme.md\":\"1pfOR8L-\",\"docs_base_transitions.md\":\"B4ubZlQI\",\"docs_colors.md\":\"DLIk-YK2\",\"docs_components_badge.md\":\"2ceLSfjz\",\"docs_components_breadcrumb.md\":\"CroQTEFw\",\"docs_components_button.md\":\"DzIv-M0G\",\"docs_components_card.md\":\"C-Ut2Mi3\",\"docs_components_carousel.md\":\"W_JQLgE0\",\"docs_components_check.md\":\"BRFhrIPi\",\"docs_components_color.md\":\"Ix8Wh-3O\",\"docs_components_compare.md\":\"sCFkcoC1\",\"docs_components_control.md\":\"Dky9KzcW\",\"docs_components_details.md\":\"CfFrWrYY\",\"docs_components_dialog.md\":\"cCT1oXWa\",\"docs_components_drawer.md\":\"CORXSG5z\",\"docs_components_field.md\":\"DfEcwAG4\",\"docs_components_form.md\":\"ZY4cxjWY\",\"docs_components_group.md\":\"DnXhgn7-\",\"docs_components_heading.md\":\"BuieRoUS\",\"docs_components_image.md\":\"DTv4vhdh\",\"docs_components_info.md\":\"BkrjygpR\",\"docs_components_label.md\":\"BfklhrQT\",\"docs_components_link.md\":\"VOAWVMgg\",\"docs_components_notice.md\":\"BpkLEPxx\",\"docs_components_pagination.md\":\"bfcSqwU_\",\"docs_components_popover.md\":\"Cjz7c5oS\",\"docs_components_progress.md\":\"BX6B_SQ1\",\"docs_components_range.md\":\"COyi-8_x\",\"docs_components_rating.md\":\"BA8hPfqo\",\"docs_components_switch.md\":\"BHbpXGPr\",\"docs_components_table.md\":\"7Fm0p11M\",\"docs_components_tabs.md\":\"C1x_wnWT\",\"docs_components_text.md\":\"B1ZwI3pt\",\"docs_components_title.md\":\"BPZEuZKT\",\"docs_components_toast.md\":\"5mFU1_DX\",\"docs_components_toaster.md\":\"B-ccSrl2\",\"docs_components_tooltip.md\":\"D96imVrN\",\"docs_grid.md\":\"Dxlehhng\",\"docs_icons.md\":\"5-s571EE\",\"docs_index.md\":\"B-yhc0hc\",\"docs_layers.md\":\"BTMX3w62\",\"docs_tokens.md\":\"XIRiElsQ\",\"docs_utilities_accent.md\":\"DzyUgun7\",\"docs_utilities_animation.md\":\"DUNznbyd\",\"docs_utilities_container.md\":\"hvJuPwb7\",\"docs_utilities_divide-gap.md\":\"BQzLkZ9i\",\"docs_utilities_divider.md\":\"C8o1kvEj\",\"docs_utilities_dot.md\":\"D4aE8DsH\",\"docs_utilities_ripple.md\":\"CG1v_29G\",\"docs_utilities_skeleton.md\":\"DwARp8m_\",\"docs_utilities_spinner.md\":\"CjaBczPj\",\"docs_utilities_swap.md\":\"DMWSJTeT\",\"docs_utilities_underline.md\":\"C2iybexL\",\"index.md\":\"CE43tDbp\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Winduum\",\"description\":\"Modern, modular, small modest CSS component framework built on top of TailwindCSS\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"outline\":\"deep\",\"editLink\":{\"pattern\":\"https://github.com/winduum/winduum-docs/edit/main/docs/:path\",\"text\":\"Suggest changes to this page\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/winduum/winduum\"},{\"icon\":\"twitter\",\"link\":\"https://twitter.com/winduum_dev\"}],\"search\":{\"provider\":\"algolia\",\"options\":{\"appId\":\"3DLECEENW2\",\"apiKey\":\"31331a8def9abe0356f5338d568ca974\",\"indexName\":\"winduum\"}},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2022-present lubomirblazek.cz\"},\"nav\":[{\"text\":\"Docs\",\"link\":\"/docs/\",\"activeMatch\":\"/docs/\"},{\"text\":\"Resources\",\"items\":[{\"items\":[{\"text\":\"TailwindCSS\",\"link\":\"https://tailwindcss.com\"},{\"text\":\"Changelog\",\"link\":\"https://github.com/winduum/winduum/blob/main/CHANGELOG.md\"},{\"text\":\"v1\",\"link\":\"https://v1--winduum.netlify.app/\"}]}]}],\"sidebar\":{\"/docs/\":[{\"text\":\"Get started\",\"items\":[{\"text\":\"Install\",\"link\":\"/docs/\"},{\"text\":\"About\",\"link\":\"/docs/about\"},{\"text\":\"Colors\",\"link\":\"/docs/colors\"},{\"text\":\"Icons\",\"link\":\"/docs/icons\"},{\"text\":\"Grid\",\"link\":\"/docs/grid\"},{\"text\":\"Layers\",\"link\":\"/docs/layers\"},{\"text\":\"Tokens\",\"link\":\"/docs/tokens\"}]},{\"text\":\"Base\",\"items\":[{\"text\":\"Config\",\"link\":\"/docs/base/config\"},{\"text\":\"Theme\",\"link\":\"/docs/base/theme\"},{\"text\":\"Reset\",\"link\":\"/docs/base/reset\"},{\"text\":\"Defaults\",\"link\":\"/docs/base/defaults\"}
47,{\"text\":\"Breakpoints\",\"link\":\"/docs/base/breakpoints\"},{\"text\":\"Keyframes\",\"link\":\"/docs/base/keyframes\"},{\"text\":\"Transitions\",\"link\":\"/docs/base/transitions\"}]},{\"text\":\"Components\",\"items\":[{\"text\":\"Badge\",\"link\":\"/docs/components/badge\"},{\"text\":\"Breadcrumb\",\"link\":\"/docs/components/breadcrumb\"},{\"text\":\"Button\",\"link\":\"/docs/components/button\"},{\"text\":\"Card\",\"link\":\"/docs/components/card\"},{\"text\":\"Carousel\",\"link\":\"/docs/components/carousel\"},{\"text\":\"Check\",\"link\":\"/docs/components/check\"},{\"text\":\"Color\",\"link\":\"/docs/components/color\"},{\"text\":\"Compare\",\"link\":\"/docs/components/compare\"},{\"text\":\"Control\",\"link\":\"/docs/components/control\"},{\"text\":\"Details\",\"link\":\"/docs/components/details\"},{\"text\":\"Dialog\",\"link\":\"/docs/components/dialog\"},{\"text\":\"Drawer\",\"link\":\"/docs/components/drawer\"},{\"text\":\"Field\",\"link\":\"/docs/components/field\"},{\"text\":\"Form\",\"link\":\"/docs/components/form\"},{\"text\":\"Group\",\"link\":\"/docs/components/group\"},{\"text\":\"Heading\",\"link\":\"/docs/components/heading\"},{\"text\":\"Image\",\"link\":\"/docs/components/image\"},{\"text\":\"Info\",\"link\":\"/docs/components/info\"},{\"text\":\"Label\",\"link\":\"/docs/components/label\"},{\"text\":\"Link\",\"link\":\"/docs/components/link\"},{\"text\":\"Notice\",\"link\":\"/docs/components/notice\"},{\"text\":\"Pagination\",\"link\":\"/docs/components/pagination\"},{\"text\":\"Popover\",\"link\":\"/docs/components/popover\"},{\"text\":\"Progress\",\"link\":\"/docs/components/progress\"},{\"text\":\"Range\",\"link\":\"/docs/components/range\"},{\"text\":\"Rating\",\"link\":\"/docs/components/rating\"},{\"text\":\"Switch\",\"link\":\"/docs/components/switch\"},{\"text\":\"Table\",\"link\":\"/docs/components/table\"},{\"text\":\"Tabs\",\"link\":\"/docs/components/tabs\"},{\"text\":\"Text\",\"link\":\"/docs/components/text\"},{\"text\":\"Title\",\"link\":\"/docs/components/title\"},{\"text\":\"Toast\",\"link\":\"/docs/components/toast\"},{\"text\":\"Toaster\",\"link\":\"/docs/components/toaster\"},{\"text\":\"Tooltip\",\"link\":\"/docs/components/tooltip\"}]},{\"text\":\"Utilities\",\"items\":[{\"text\":\"Accent\",\"link\":\"/docs/utilities/accent\"},{\"text\":\"Animation\",\"link\":\"/docs/utilities/animation\"},{\"text\":\"Container\",\"link\":\"/docs/utilities/container\"},{\"text\":\"Divide Gap\",\"link\":\"/docs/utilities/divide-gap\"},{\"text\":\"Divider\",\"link\":\"/docs/utilities/divider\"},{\"text\":\"Dot\",\"link\":\"/docs/utilities/dot\"},{\"text\":\"Skeleton\",\"link\":\"/docs/utilities/skeleton\"},{\"text\":\"Spinner\",\"link\":\"/docs/utilities/spinner\"},{\"text\":\"Swap\",\"link\":\"/docs/utilities/swap\"},{\"text\":\"Ripple\",\"link\":\"/docs/utilities/ripple\"},{\"text\":\"Underline\",\"link\":\"/docs/utilities/underline\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
47
48    
49  </body>
50</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.