# Zyzz

> Type-safe styles, variables, and themes. Compile to static CSS with Zyzz.

Each link opens a page's Markdown. [llms-full.txt](https://zyzz.style/llms-full.txt) holds every page in one file.

## Introduction

- [Getting Started](https://zyzz.style/docs/introduction/getting-started.md): Get up and running with Zyzz, from config to compiled styles.
- [Why Zyzz](https://zyzz.style/docs/introduction/why-zyzz.md): Standard CSS with design rules that developers and agents can check.
- [Thinking in Zyzz](https://zyzz.style/docs/introduction/thinking-in-zyzz.md): Keep styles beside components, compose them by name, and let TypeScript check the choices between them.
- [Concepts & Principles](https://zyzz.style/docs/concepts.md): How styles, tokens, and compilation behave.
- [Comparisons](https://zyzz.style/docs/introduction/comparisons.md): Compare how Zyzz, Tailwind CSS, StyleX, and vanilla-extract define, compose, and apply styles.
- [Benchmarks](https://zyzz.style/docs/introduction/benchmarks.md): Measured compilation and delivery costs, with the workloads and boundaries behind each result.
- [Agents](https://zyzz.style/docs/introduction/agents.md): Give coding agents the documentation and project conventions they need to build with Zyzz.
- [Compatibility](https://zyzz.style/docs/introduction/compatibility.md): Framework, runtime, browser, and native support, with the limits of each verified path.
- [FAQ](https://zyzz.style/docs/introduction/faq.md): Answers to common questions about configuration, compilation, and platform support.

## Guides

- [Styling](https://zyzz.style/docs/guides/styling.md): Define typed styles beside components, apply them as props, and combine them in a predictable order.
- [Themes & Tokens](https://zyzz.style/docs/guides/themes.md): Name shared design values once, use them in every style, and change them for a color scheme, a brand, or one section of a page.
- [Default Theme](https://zyzz.style/docs/guides/default-theme.md): Style with bundled Geist colors and typography and Tailwind scales, without a config module.
- [Conditions](https://zyzz.style/docs/guides/conditions.md): Style browser states, viewport and container sizes, supported features, and related elements with standard CSS conditions.
- [Variants](https://zyzz.style/docs/guides/variants.md): Define typed component choices, apply defaults, and combine matching selections without writing class-name logic.
- [Base UI](https://zyzz.style/docs/guides/base-ui.md): Style Base UI parts with autocomplete for their data attributes and state values.
- [Global Styles](https://zyzz.style/docs/guides/global-styles.md): Style document elements with selector maps compiled into the application stylesheet.
- [Layers](https://zyzz.style/docs/guides/layers.md): Order document defaults, resets, and component styles with cascade layers.
- [Fonts & Typography](https://zyzz.style/docs/guides/typography.md): Load fonts, name font tokens, and apply typography presets in styles.
- [Keyframes](https://zyzz.style/docs/guides/keyframes.md): Define named animations beside the components that use them.
- [At-Rules](https://zyzz.style/docs/guides/at-rules.md): Emit statement and descriptor at-rules, from stylesheet imports to print pages and custom functions.
- [Reset](https://zyzz.style/docs/guides/reset.md): Opt into a base reset that normalizes browser defaults below application styles.
- [CSS Output](https://zyzz.style/docs/guides/css-output.md): Choose whether Zyzz writes one class per declaration or one class per style.
- [React Native › Overview](https://zyzz.style/docs/guides/native.md): Compile typed styles with Metro, and select themes and window sizes as the app renders.
- [React Native › Styling](https://zyzz.style/docs/guides/native/styling.md): Combine and override compiled styles, branch by platform, and bind values that change at runtime.
- [React Native › Themes](https://zyzz.style/docs/guides/native/themes.md): Select color schemes and named token sets with a typed Provider, and read tokens in components.
- [React Native › Responsive Styles](https://zyzz.style/docs/guides/native/responsive.md): Adapt native styles and tokens to the window size and orientation with media queries.
- [React Native › Components](https://zyzz.style/docs/guides/native/components.md): Resolve compiled styles for third-party components, class components, and code outside JSX.
- [React Native › Animations](https://zyzz.style/docs/guides/native/animations.md): Animate between theme and variant values with Reanimated shared values.
- [React Native › Shared Packages](https://zyzz.style/docs/guides/native/packages.md): Share styles and themes across packages in a monorepo, and consume published packages.
- [React Native › Migrating from Unistyles](https://zyzz.style/docs/guides/native/unistyles.md): Move a Unistyles 3 app to Zyzz one screen at a time, with before-and-after examples for each pattern.
- [Linting](https://zyzz.style/docs/api/oxlint.md): Catch invalid web styles, conflicting JSX props, and unused definitions with Zyzz's Oxlint plugin.
- [Testing & Troubleshooting](https://zyzz.style/docs/guides/testing.md): Test compiled styles in a browser, and diagnose missing transforms, styles, and overrides.
- [Migrating from Tailwind](https://zyzz.style/docs/guides/tailwind.md): Move a Tailwind CSS v4 application to Zyzz one component at a time, with before-and-after examples for each pattern.
- [Migrating from StyleX](https://zyzz.style/docs/guides/stylex.md): Move StyleX components, variables, and themes to Zyzz, with before-and-after examples for each API.

## API

- [Core › Overview](https://zyzz.style/docs/api/core.md): Define styles, recipes, variables, and configuration with the root zyzz entrypoint.
- [Core › style](https://zyzz.style/docs/api/core/style.md): Define a callable style that compiles to static CSS and returns styling props.
- [Core › variants](https://zyzz.style/docs/api/core/variants.md): Define finite style choices, defaults, and compound rules for one element.
- [Core › cx](https://zyzz.style/docs/api/core/cx.md): Combine applied styles in order, keeping their variable bindings and recipe attributes.
- [Core › variable](https://zyzz.style/docs/api/core/variable.md): Declare a typed CSS variable that styles read and assign, statically or when applied.
- [Core › defineConfig](https://zyzz.style/docs/api/core/defineConfig.md): Bind style and recipe helpers to a variable set, and return the config helpers.
- [Core › defineVars](https://zyzz.style/docs/api/core/defineVars.md): Define a typed variable set of tokens, color pairs, and conditions without emitting CSS.
- [Core › extendVars](https://zyzz.style/docs/api/core/extendVars.md): Override, add, or remove values in an existing variable set.
- [Core › vars](https://zyzz.style/docs/api/core/defineConfig/vars.md): Reference tokens, and select a variable set or color scheme for a subtree.
- [Core › appearance](https://zyzz.style/docs/api/core/defineConfig/appearance.md): Read and persist the document's variable set and color scheme across page loads.
- [Core › script](https://zyzz.style/docs/api/core/defineConfig/script.md): Return an inline script that restores saved preferences before the first paint.
- [Core › Config](https://zyzz.style/docs/api/core/namespaces/Config.md): Configuration types and errors, plus the create function behind defineConfig.
- [Core › Props](https://zyzz.style/docs/api/core/namespaces/Props.md): Type-only helpers that infer a component's props from a variants definition.
- [Core › Style](https://zyzz.style/docs/api/core/namespaces/Style.md): Define and validate ordered style data, with the shared style types and errors.
- [Core › Vars](https://zyzz.style/docs/api/core/namespaces/Vars.md): The functions behind defineVars and extendVars, with variable set types.
- [Core › Values](https://zyzz.style/docs/api/core/values.md): Supported CSS properties and literal values, including fallbacks and importance.
- [Web › Overview](https://zyzz.style/docs/api/web.md): Declare global rules, cascade layers, and at-rules, and compile web CSS with the zyzz/web entrypoint.
- [Web › global](https://zyzz.style/docs/api/web/global.md): Emit global selector rules and their grouping rules into the shared stylesheet.
- [Web › layers](https://zyzz.style/docs/api/web/layers.md): Declare the order of cascade layers for the whole project.
- [Web › fontFace](https://zyzz.style/docs/api/web/fontFace.md): Emit an @font-face rule from typed font descriptors.
- [Web › keyframes](https://zyzz.style/docs/api/web/keyframes.md): Emit an @keyframes rule and return its generated animation name.
- [Web › importCss](https://zyzz.style/docs/api/web/importCss.md): Emit an @import rule for an external stylesheet, with optional conditions.
- [Web › page](https://zyzz.style/docs/api/web/page.md): Emit an @page rule with page descriptors and page-margin boxes.
- [Web › viewTransition](https://zyzz.style/docs/api/web/viewTransition.md): Emit an @view-transition rule that opts documents into cross-document transitions.
- [Web › positionTry](https://zyzz.style/docs/api/web/positionTry.md): Emit an @position-try rule and return a reference for anchored fallbacks.
- [Web › counterStyle](https://zyzz.style/docs/api/web/counterStyle.md): Emit an @counter-style rule and return a reference for list markers and counters.
- [Web › customMedia](https://zyzz.style/docs/api/web/customMedia.md): Emit an @custom-media rule and return a key that groups declarations under it.
- [Web › property](https://zyzz.style/docs/api/web/property.md): Emit an @property rule that registers a custom property with a syntax, inheritance, and initial value.
- [Web › fontFeatureValues](https://zyzz.style/docs/api/web/fontFeatureValues.md): Emit an @font-feature-values rule that names OpenType feature indices for a font family.
- [Web › fontPaletteValues](https://zyzz.style/docs/api/web/fontPaletteValues.md): Emit an @font-palette-values rule and return a reference for color font palettes.
- [Web › cssFunction](https://zyzz.style/docs/api/web/cssFunction.md): Emit an @function rule and return a callable that writes calls to it.
- [Web › colorProfile](https://zyzz.style/docs/api/web/colorProfile.md): Emit an @color-profile rule and return a reference for color() values.
- [Web › namespace](https://zyzz.style/docs/api/web/namespace.md): Emit an @namespace rule for the selectors of one module.
- [Web › Css](https://zyzz.style/docs/api/web/namespaces/Css.md): Compile ordered style data into CSS text, class names, and variable set scopes.
- [Web › At-Rule Contract](https://zyzz.style/docs/api/web/at-rules.md): Which API owns each CSS at-rule, and the rules every stylesheet helper follows.
- [React Native › Overview](https://zyzz.style/docs/api/react-native.md): Configure native styles, select themes with React, and compile shared definitions into native tables.
- [React Native › defineConfig](https://zyzz.style/docs/api/react-native/defineConfig.md): Bind native style helpers to variables, and return a Provider typed to the config.
- [React Native › Provider](https://zyzz.style/docs/api/react-native/Provider.md): Select the color scheme, variable set, and window size for native styles beneath it.
- [React Native › useStyles](https://zyzz.style/docs/api/react-native/useStyles.md): Resolve compiled native styles for consumers that read style objects outside JSX.
- [React Native › useVars](https://zyzz.style/docs/api/react-native/useVars.md): Read native token values selected by the nearest Provider, with an optional selector.
- [React Native › withStyles](https://zyzz.style/docs/api/react-native/withStyles.md): Wrap a component so its style props resolve through the nearest Provider.
- [React Native › useAnimatedVars](https://zyzz.style/docs/api/react-native/useAnimatedVars.md): Publish selected native token values to a Reanimated shared value for worklets.
- [React Native › useAnimatedStyleValue](https://zyzz.style/docs/api/react-native/useAnimatedStyleValue.md): Publish one numeric or color property of an applied style to a shared value.
- [React Native › StyleSheet](https://zyzz.style/docs/api/react-native/namespaces/StyleSheet.md): Compile shared definitions into frozen native tables, then select and compose them.
- [React Native › Variants](https://zyzz.style/docs/api/react-native/namespaces/Variants.md): Compile a static recipe into native tables for every choice combination.
- [React Native › Host](https://zyzz.style/docs/api/react-native/namespaces/Host.md): Hold explicit device inputs and rebind compiled callables when those inputs change.
- [React Native › Values](https://zyzz.style/docs/api/react-native/values.md): Supported native properties, units, colors, and conversions, with rejected values.
- [CLI](https://zyzz.style/docs/api/cli.md): Compile a source tree into rewritten modules, CSS, source maps, and packed contracts.
- [Integrations › Vite](https://zyzz.style/docs/api/vite.md): Compile styles and deliver their CSS through Vite's module graph.
- [Integrations › Next.js](https://zyzz.style/docs/api/next.md): Wrap a Next.js configuration with style compilation and CSS delivery.
- [Integrations › Metro](https://zyzz.style/docs/api/metro.md): Compile native styles during iOS and Android bundling with Metro.
- [Integrations › Unplugin](https://zyzz.style/docs/api/unplugin.md): Compile styles with esbuild, Rollup, or Webpack and emit CSS beside the bundle.
- [Integrations › Babel](https://zyzz.style/docs/api/babel.md): Compile literal style definitions for web or native inside a Babel pipeline.
- [Compiler › Overview](https://zyzz.style/docs/api/compiler.md): Extract, rewrite, and link style authoring with the zyzz/compiler entrypoint.
- [Compiler › Graph](https://zyzz.style/docs/api/compiler/namespaces/Graph.md): Compile a source graph, linking configs and definitions across modules.
- [Compiler › Native](https://zyzz.style/docs/api/compiler/namespaces/Native.md): Compile shared style authoring into native callables, fixed or contextual per scheme.
- [Compiler › Source](https://zyzz.style/docs/api/compiler/namespaces/Source.md): Extract static style definitions from module text without running it.
- [Compiler › Transform](https://zyzz.style/docs/api/compiler/namespaces/Transform.md): Rewrite one module's authoring calls and emit its matching CSS and source maps.
- [WebAssembly Compiler › Overview](https://zyzz.style/docs/api/compiler/wasm.md): Compile source graphs in browsers and workers with the zyzz/compiler/wasm entrypoint and the zyzz/compiler.wasm module.
- [WebAssembly Compiler › Graph](https://zyzz.style/docs/api/compiler/wasm/namespaces/Graph.md): Compile a web source graph in browsers and workers, without the native addon.
- [Runtime › Overview](https://zyzz.style/docs/api/runtime.md): Apply compiled class names, variant attributes, theme scopes, and native tables without generating CSS.
- [Runtime › Props](https://zyzz.style/docs/api/runtime/namespaces/Props.md): Bind compiled class names to the styling overrides of a static style.
- [Runtime › Dynamic](https://zyzz.style/docs/api/runtime/namespaces/Dynamic.md): Assign required callback values to fixed private custom properties on each application.
- [Runtime › Recipe](https://zyzz.style/docs/api/runtime/namespaces/Recipe.md): Serialize finite variant selections as data attributes beside compiled class names.
- [Runtime › ConditionalRecipe](https://zyzz.style/docs/api/runtime/namespaces/ConditionalRecipe.md): Add scoped attributes for variant selections that apply only inside a named condition.
- [Runtime › PayloadRecipe](https://zyzz.style/docs/api/runtime/namespaces/PayloadRecipe.md): Bind the values of dynamic variant choices to precompiled private custom properties.
- [Runtime › Composition](https://zyzz.style/docs/api/runtime/namespaces/Composition.md): Merge applied props over one precompiled class list for a statically resolved composition.
- [Runtime › Html](https://zyzz.style/docs/api/runtime/namespaces/Html.md): Convert applied props to class, style, and data attributes, and escape them for markup.
- [Runtime › CompositionHtml](https://zyzz.style/docs/api/runtime/namespaces/CompositionHtml.md): Keep the canonical props behind HTML attributes, so a composition serializes them once.
- [Runtime › Selection](https://zyzz.style/docs/api/runtime/namespaces/Selection.md): Select a compiled variable set and an optional color scheme for one element's subtree.
- [Runtime › Appearance](https://zyzz.style/docs/api/runtime/namespaces/Appearance.md): Restore the saved root selection before paint, and read or persist it afterwards.
- [Runtime › Variable](https://zyzz.style/docs/api/runtime/namespaces/Variable.md): Bind a compiler-assigned custom property name to a reference with a typed setter.
- [Runtime › Native](https://zyzz.style/docs/api/runtime/namespaces/Native.md): Select one precompiled native style per variant combination, and compose native style props.
- [Runtime › NativeStatic](https://zyzz.style/docs/api/runtime/namespaces/NativeStatic.md): Merge ordered native fragments for finite variant selections and cache each result.
- [Runtime › NativeDynamic](https://zyzz.style/docs/api/runtime/namespaces/NativeDynamic.md): Convert callback values and variant payloads to native styles with compiled binding rules.
- [Runtime › NativeContext](https://zyzz.style/docs/api/runtime/namespaces/NativeContext.md): Defer the choice between compiled set, scheme, and media alternatives until a view renders.
- [Runtime › NativeVars](https://zyzz.style/docs/api/runtime/namespaces/NativeVars.md): Hold compiled native variable values for every set and scheme, and read one profile.
- [Node › Overview](https://zyzz.style/docs/api/node.md): Build and watch a source directory into owned output with the zyzz/node entrypoint.
- [Node › Host.create](https://zyzz.style/docs/api/node/create.md): Open a host that compiles a source directory into an owned output directory.
- [Node › build](https://zyzz.style/docs/api/node/create/build.md): Scan, compile, and publish the source tree, and list the changed output files.
- [Node › watch](https://zyzz.style/docs/api/node/create/watch.md): Rebuild after source or dependency changes, and report each build or failure.
- [Node › close](https://zyzz.style/docs/api/node/create/close.md): Stop watching, finish queued builds, and release the output directory lock.
- [Node › Host](https://zyzz.style/docs/api/node/namespaces/Host.md): The filesystem host namespace, with its build, event, and runtime types.