# Winduum > Small and modest CSS component library Components in plain CSS built on the newest web standards - with as little JavaScript as possible. TailwindCSS for utility classes. ## Table of Contents ### Migrations - [Migrate to Winduum v3](/migrations/winduum-v3.md): Migration guide for upgrading Winduum and winduum-stimulus projects from v2 to v3. - [Migrate from winduum-stimulus v3 to winduum-elements](/migrations/winduum-elements-v3.md): Migration guide for replacing winduum-stimulus v3 with winduum-elements in a Winduum 3 project. ### Get started - [Install](/docs.md): You can use Winduum with or without TailwindCSS. - [About](/docs/about.md): Winduum is a small, modern CSS component framework built on the newest web standards, using as little JavaScript as possible. - [Colors](/docs/colors.md): There are few types of colors with various areas of use. Colors are defined in Theme. - [Icons](/docs/icons.md): It's recommended to use icons as svg, such as Heroicons - [Grid](/docs/grid.md): It's recommended to use the following TailwindCSS approaches to shape your layout - [Tokens](/docs/tokens.md): Every component has class tokens which you can use for component customization. These tokens can be used with TailwindCSS variants. - [Polyfills](/docs/polyfills.md): Install the optional polyfill dependencies and add the Webuum and Winduum polyfill entry points to cover unsupported browser features. ### Base - [CSS config](/docs/base/config.md): Theme configuration via CSS custom properties — works with the TailwindCSS @theme at-rule or as plain CSS properties without TailwindCSS. - [Theme](/docs/base/theme.md): Theming in Winduum is really easy. All it takes is a few CSS properties. There are two themes by default (light and dark) and to create a new one, you can… - [Reset](/docs/base/reset.md): New modern CSS reset, that means Preflight from TailwindCSS is disabled by default. - [Defaults](/docs/base/defaults.md): Default styles or rules applied to certain HTML elements or pseudo-elements. These are very much optional. - [Breakpoints](/docs/base/breakpoints.md): Breakpoints in Winduum are very close to TailwindCSS, yet they have slightly different values and extended to cover all possible resolutions. - [Keyframes](/docs/base/keyframes.md): Following keyframes are provided in src/base/keyframes.css. - [Transitions](/docs/base/transitions.md): This activates the View Transitions API with cross-document animations. ### Components - [Badge](/docs/components/badge.md): Small labelling component to highlight statuses, counts or categories. - [Breadcrumb](/docs/components/breadcrumb.md): Displays the current page location within a navigational hierarchy. - [Button](/docs/components/button.md): Button component for triggering actions — works with button, a and input elements and comes in several variants and sizes. - [Card](/docs/components/card.md): Content container for grouping related information and actions. - [Carousel](/docs/components/carousel.md): Provides a broadly compatible scroll carousel built with native CSS scroll snapping. - [Check](/docs/components/check.md): Check supports checkbox and radio input types - [Color](/docs/components/color.md): Color supports checkbox and radio input types for displaying selected color. - [Compare](/docs/components/compare.md): Side-by-side comparison slider component. - [Control](/docs/components/control.md): Form control as it should be! - [Details](/docs/components/details.md): An accessible accordion or toggle component for details and summary elements. - [Dialog](/docs/components/dialog.md): Modal component that uses native HTML5 dialog functionality. - [Drawer](/docs/components/drawer.md): Provides a scroll drawer that uses native HTML5 dialog and CSS scroll-snap property. - [Field](/docs/components/field.md): Component used to group a form components. - [Form](/docs/components/form.md): Provides a basic way to validate your form and show feedback to your users with native HTML5 form validation. Use attributes such as pattern to add other… - [Group](/docs/components/group.md): Group common ui components such as Button, Badge or Control together. - [Heading](/docs/components/heading.md): For common heading styles that you can manage from one component across project. - [Image](/docs/components/image.md): Default constrains for media elements such as img, video, iframe, object or svg - [Info](/docs/components/info.md): Small informative component. - [Label](/docs/components/label.md): Accessible label for form controls such as inputs, selects or textareas. - [Marquee](/docs/components/marquee.md): Marquee creates an infinite horizontal loop for logos, partners or other repeated items. It is CSS-only and positions each child on the same motion path… - [Notice](/docs/components/notice.md): Informative message component — use accent colors for success, error, warning or info states. - [Pagination](/docs/components/pagination.md): Navigation between multiple pages of content. - [Popover](/docs/components/popover.md): Popover can be used for dropdowns and other popovers when an element is clicked, focused or hovered. - [Progress](/docs/components/progress.md): Displays progress with native HTML5 tags progress or meter - [Range](/docs/components/range.md): Accessible range slider that allows easy selection of a value by sliding a handle. - [Rating](/docs/components/rating.md): Accessible star rating built with radio input types. - [Switch](/docs/components/switch.md): Toggle switch built with a checkbox input type. - [Table](/docs/components/table.md): Display your data in non-interactive, interactive or responsive tables. - [Tabs](/docs/components/tabs.md): Accessible tabs to switch between panels of content. - [Text](/docs/components/text.md): Typographic defaults for plain text and rich content. - [Title](/docs/components/title.md): For common title styles that you can manage from one component across project. - [Toast](/docs/components/toast.md): Let it bake and fly from your Toaster! - [Toaster](/docs/components/toaster.md): Bake your Toast and let it fly! You should insert in into your - [Tooltip](/docs/components/tooltip.md): Tooltip can be used for a little info hint on hover or focus. ### Utilities - [Accent](/docs/utilities/accent.md): Provides a new TailwindCSS utility class accent which extends Accent utility classe. - [Animation](/docs/utilities/animation.md): A set of utilities for working with CSS animations. Instead of predefined animation classes, Winduum lets you compose animations from small building blocks: - [Divide Gap](/docs/utilities/divide-gap.md): Provides a new TailwindCSS utility classes divide-gap-x and divide-gap-y for easier way to do gap between Divide utility classes. You can use all values… - [Divider](/docs/utilities/divider.md): Provides a new utility class divider so you can easily separate content. - [Dot](/docs/utilities/dot.md): Provides a new utility class dot for.. well dots! - [Grid](/docs/utilities/grid.md): Utilities that extend TailwindCSS grid with two additions: - [Link](/docs/utilities/link.md): Provides a link utility class that adds a smooth color transition on hover and focus to interactive elements. It only applies to elements that are actually… - [Position](/docs/utilities/position.md): Utilities for positioning elements with CSS Anchor Positioning — each utility sets the position-area property together with position-try-fallbacks, so the… - [Ripple](/docs/utilities/ripple.md): A material ripple effect that is visible on clicking. - [Skeleton](/docs/utilities/skeleton.md): Introduces a utility class skeleton for loading state of a page or a component. - [Spinner](/docs/utilities/spinner.md): Provides a new utility class spinner for circular animated spinners. - [Swap](/docs/utilities/swap.md): Provides a new utility class swap to toggle between elements. - [Underline](/docs/utilities/underline.md): Extends underline utility class for easy underline animations. - [View Transition](/docs/utilities/view-transition.md): Provides a utility class for the View Transition API — view-transition-main sets view-transition-name: main, so the element transitions independently from… ### Variants - [Dark](/docs/variants/dark.md): Overrides the default TailwindCSS dark mode variant to be class-based instead of media query based. The dark: variant applies to elements with the .dark… - [Hocus](/docs/variants/hocus.md): Provides a hocus: variant — a shortcut that applies styles on both hover and focus-visible, so you don't have to repeat every interactive style twice. - [Interest](/docs/variants/interest.md): Provides interest-target: and interest-source: variants for Interest Invokers — the interestfor attribute that lets controls declaratively show interest in… - [Scroll State](/docs/variants/scroll-state.md): Provides variants for scroll-state container queries — style elements based on the scroll state of their container: whether it can be scrolled, has been… ### Other - [Carousel Experimental](/docs/components/carousel-experimental.md): Provides an experimental scroll carousel built around emerging native carousel APIs. - [Migrations](/migrations.md): Migration guides for upgrading Winduum and its integrations to v3.