# 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): How Zazz controls the cascade with layers, tokens, and conventions: no specificity wars, no build step.
  - [Installation](/docs/getting-started/installation): Add Zazz to any vanilla HTML project in under a minute. No build step required.
  - [Structuring your head tag](/docs/getting-started/head): The document skeleton a Zazz page expects: what goes in the head, the one stylesheet link, where scripts load, and the landmarks that make page transitions work.
  - [Migrating to Zazz](/docs/getting-started/migrating): Adopt Zazz incrementally on top of an existing CSS codebase, using cascade layers, @scope donut scoping, and migrations-layer shims so the two systems never fight while you migrate.
  - [LLMs](/docs/getting-started/llms): Use AI coding assistants with Zazz through purpose-built skills and context files.
- Core concepts
  - [Styling with utility classes](/docs/core-concepts/utility-classes): Build interfaces by composing small, single-purpose classes in your markup, each one wired to a design token, so what you build stays on-system.
  - [Hover, focus, and other states](/docs/core-concepts/states): Style hover, focus, validation, and disabled states straight from your markup, with prefixed utilities for hover and sensible defaults that handle the rest.
  - [Responsive design](/docs/core-concepts/responsive-design): Zazz is responsive by default. Fluid type and spacing scale on their own, and responsive prefixes read one centralized set of breakpoints that the body container publishes off the page width.
  - [Dark mode](/docs/core-concepts/dark-mode): Dark mode is on from the first line. Use a role color and both themes are correct for free, with no .dark overrides and no duplicated styles.
  - [Colors](/docs/core-concepts/colors): Color in Zazz is role-first. Pick a role like primary or muted-foreground and light/dark swap for free; drop to a numeric scale only when a role can't express it.
  - [Adding custom styles](/docs/core-concepts/custom-styles): When tokens and utilities don't cover it, extend Zazz without touching its source. Override a token, drop a rule into the right layer, or write a one-off inline.
- Components
  - [Button](/docs/components/button): Clickable actions and links with shadcn-style data-variant and data-size options.
  - [Button group](/docs/components/button-group): Join adjacent buttons into a single segmented unit, horizontal or vertical.
  - [Toggle](/docs/components/toggle): A two-state button backed by a native checkbox or radio, styled like a button.
  - [Toggle group](/docs/components/toggle-group): Fuse several toggles into one segmented control, single- or multi-select.
  - [Badge](/docs/components/badge): Compact status and category chips that share the button's data-variant vocabulary.
  - [Avatar](/docs/components/avatar): A circular image-with-fallback built from utility classes.
  - [Card](/docs/components/card): Product and content cards composed from theme tokens and utilities.
  - [Prose](/docs/components/prose): Editorial typography for long-form, author-controlled HTML content.
  - [Accordion](/docs/components/accordion): Collapsible sections built on native details and summary elements. No JavaScript.
  - [Tabs](/docs/components/tabs): A CSS-first tab group with radio-driven panels and keyboard enhancement.
  - [Tooltip](/docs/components/tooltip): Hover and focus hints on the Popover API with Interest Invokers and anchor positioning.
  - [Dialog](/docs/components/dialog): Native dialog modals driven by the Invoker Commands API, with no JavaScript to wire up.
  - [Dropdown](/docs/components/dropdown): A button-triggered menu on the Popover API with anchor positioning and native light-dismiss.
  - [Navigation menu](/docs/components/navigation-menu): Mega-menu navigation with popover panels, submenus, and anchor positioning.
  - [Mobile menu](/docs/components/mobile-menu): Full-screen slide-in navigation dialog with nested accordion sections, using native HTML APIs.
  - [Breadcrumbs](/docs/components/breadcrumbs): Hierarchical navigation composed from link buttons and separators.
  - [Lightbox](/docs/components/lightbox): A media lightbox web component with an inline gallery, fullscreen dialog, and thumbs.
  - [Carousel](/docs/components/carousel): A draggable, looping carousel built on Embla and wrapped in the embla-carousel web component, with dots, thumbnails, keyboard nav, and lightbox support driven entirely by markup.

  - **Forms**
  - [Input](/docs/components/input): A text input on the shared field base with native validation styling.
  - [Input group](/docs/components/input-group): An input with attached addons (icons, labels, or buttons) on any side.
  - [Password group](/docs/components/password-group): A password input with a built-in show/hide visibility toggle.
  - [Textarea](/docs/components/textarea): A multi-line text field on the shared field base.
  - [Select](/docs/components/select): A native select restyled with the customizable select API.
  - [Checkbox](/docs/components/checkbox): A restyled native checkbox on the shared field base.
  - [Radio](/docs/components/radio): Restyled native radio inputs, grouped for single-choice selection.
  - [Switch](/docs/components/switch): A toggle built from a native checkbox with a switch role.
  - [Slider](/docs/components/slider): A styled, accessible native range input.

  - **Scripts**
  - [Reveal](/docs/components/reveal): Scroll-based reveal animations: lightweight, configurable viewport entry effects for elements and staggered groups.
  - [Utils](/docs/components/utils): Shared DOM and data-attribute parsing utilities used by other Zazz scripts.
- Scripts
  - [Scripting](/docs/scripts/scripting): How Zazz scripts are structured, documented, and initialized: the vanilla-JavaScript conventions behind every browser-native behavior.