# Docs - [Introduction](/docs): A variables-driven design framework that runs in any design tool and development framework with or without a build step. - Getting Started - [Overview](/docs/getting-started/overview): Control the CSS cascade with layers, tokens, and conventions. No specificity conflicts, no build step. - [Installation](/docs/getting-started/installation): Add Zazz to any project using npm, CDN, or standalone source files. No build step required. - [Structuring your head tag](/docs/getting-started/head): Document skeleton for Zazz pages: head configuration, stylesheet linking, module resolution, and landmark structure. - [Migrating to Zazz](/docs/getting-started/migrating): Adopt Zazz incrementally on existing CSS codebases using cascade layers, @scope donut scoping, and migration shims. - [LLMs](/docs/getting-started/llms): Use AI coding assistants with Zazz through structured agent skills and context files. - Core concepts - [Styling with utility classes](/docs/core-concepts/utility-classes): Compose interfaces using single-purpose utility classes mapped to design tokens. - [Hover, focus, and other states](/docs/core-concepts/states): Style hover, focus, validation, and disabled states directly in markup or component styles. - [Responsive design](/docs/core-concepts/responsive-design): Responsive layout utilities using fluid typography, fluid spacing, and centralized container style queries. - [Dark mode](/docs/core-concepts/dark-mode): Dark mode support via light-dark() role tokens, color-scheme meta tags, and the .dark class. - [Colors](/docs/core-concepts/colors): Color in Zazz is role-first. Semantic roles adapt across light/dark themes; numeric scales serve as escape hatches. - [Adding custom styles](/docs/core-concepts/custom-styles): Extend Zazz without modifying core files using token overrides, custom cascade layers, and unlayered CSS. - Components - [Button](/docs/components/button): Actions and links with data-variant and data-size attributes. - [Button group](/docs/components/button-group): Segmented button controls in horizontal or vertical layouts. - [Toggle](/docs/components/toggle): Two-state button control backed by a native checkbox or radio input. - [Toggle group](/docs/components/toggle-group): Segmented toggle controls for single- or multi-select options. - [Toolbar](/docs/components/toolbar): A row of controls composed from existing primitives and utility classes. - [Separator](/docs/components/separator): A themed rule between content or controls, horizontal or vertical, on a native hr. - [Badge](/docs/components/badge): Status and category chips that use the standard data-variant system. - [Kbd](/docs/components/kbd): Keyboard key hints on the native kbd element, with a group for shortcut runs. - [Avatar](/docs/components/avatar): Circular image with fallback composed using utility classes. - [Card](/docs/components/card): Product and content card patterns composed using utility classes. - [Prose](/docs/components/prose): Typography container for rich author-controlled HTML content. - [Table](/docs/components/table): Styled semantic HTML tables with striped, grid, and compact variants. - [Progress](/docs/components/progress): Task completion on a native progress element, restyled from theme tokens. - [Meter](/docs/components/meter): A scalar value within a known range on a native meter element. - [Accordion](/docs/components/accordion): Collapsible sections built on native details and summary elements without JavaScript. - [Tabs](/docs/components/tabs): CSS-driven tabs using radio buttons with keyboard enhancement via ui-tabs. - [Tooltip](/docs/components/tooltip): Hover and focus hints built on the Popover API with Interest Invokers and anchor positioning. - [Dialog](/docs/components/dialog): Modal dialogs built with native dialog elements and Invoker Commands. - [Alert dialog](/docs/components/alert-dialog): A modal dialog that requires an explicit response to proceed. - [Toaster](/docs/components/toaster): Stacked toast notifications rendered on the top layer using the Popover API and Invoker Commands. - [Menu](/docs/components/menu): Popover menus using the Popover API, anchor positioning, and native light dismiss, with optional hover open and arrow-key navigation. - [Menubar](/docs/components/menubar): A bar of application menus (File, Edit, View) composed from menu primitives and utilities. - [Command](/docs/components/command): A command menu for search and quick actions, opened as a popover or a dialog. - [Navigation menu](/docs/components/navigation-menu): Mega-menu navigation using popover panels, nested submenus, and anchor positioning. - [Mobile menu](/docs/components/mobile-menu): Fullscreen slide-in navigation dialog with nested accordion sections. - [Breadcrumbs](/docs/components/breadcrumbs): Hierarchical navigation links with slash separators. - [Lightbox](/docs/components/lightbox): Lightbox custom element combining an inline gallery, fullscreen dialog, and synchronized thumbnails. - [Carousel](/docs/components/carousel): Draggable, looping carousels built with Embla and the ui-carousel custom element. - **Forms** - [Input](/docs/components/input): Text inputs with shared field tokens and native validation styling. - [Input group](/docs/components/input-group): Input fields with attached leading, trailing, top, or bottom addons. - [Password group](/docs/components/password-group): Password input with built-in show/hide visibility toggle. - [OTP](/docs/components/otp): A one-time password field with character slots over one real input. - [Textarea](/docs/components/textarea): Multi-line text inputs with auto-growth and shared form field tokens. - [Select](/docs/components/select): Native select control styled using the customizable select API and anchor positioning. - [Autocomplete](/docs/components/autocomplete): An input that suggests options as you type, ranked by match quality. - [Combobox](/docs/components/combobox): An input combined with a predefined list, filtering options like a select. - [Checkbox](/docs/components/checkbox): Restyled native checkbox element on the shared field base. - [Radio](/docs/components/radio): Restyled native radio inputs grouped for single-choice selection. - [Switch](/docs/components/switch): Toggle control built from native checkbox with switch role. - [Slider](/docs/components/slider): Styled native range input element with keyboard navigation. - **Scripts** - [Reveal](/docs/components/reveal): Scroll-based viewport entry animations using IntersectionObserver and CSS transitions. - [Utils](/docs/components/utils): Shared DOM and data-attribute parsing helpers used by component scripts. - Scripts - [Scripting](/docs/scripts/scripting): Vanilla JavaScript architecture, web component patterns, auto-initialization, and module dependencies.