---
language: "en"
title: "Docs Hub"
canonical: "https://tasty.style/docs/docs-hub"
source: "docs/README.md"
index: true
---

# Docs Hub

# Tasty Docs

Tasty is CSS-in-JS for React design systems. You describe hover, disabled, variants, themes, responsive behavior, and other conditions as state maps; Tasty compiles them so one branch wins without specificity fights or source-order surprises.

Use this hub to move from the core idea to a working component, then into design-system patterns or API reference as needed.

## Start Here

* **Understand why**: [Introduction](/docs/) for the problem, the state-map model, and the product overview.
* **Try it**: [Getting Started](/docs/getting-started) to build a stateful component, add shared configuration, and choose a rendering mode.
* **Build a component system**: [Methodology](/docs/methodology) for root + sub-elements, typed public APIs, tokens, and extension patterns; then [Building a Design System](/docs/design-system).
* **Evaluate or adopt it**: [Comparison](/docs/comparison) for tool-selection context and [Adoption Guide](/docs/adoption) for an incremental rollout.
* **Understand the compiler**: [Style rendering pipeline](/docs/pipeline) for how state maps become mutually exclusive selectors.

## By Role

* **Application developer using an existing design system**: [Getting Started](/docs/getting-started), then [React API](/docs/react-api).
* **Design-system author**: [Methodology](/docs/methodology), [Building a Design System](/docs/design-system), [Configuration](/docs/configuration), and [Adoption Guide](/docs/adoption).
* **Platform or tooling engineer**: [Configuration](/docs/configuration), [Plugins & Extension Points](/docs/plugins), [Build-Time Extraction (`tastyStatic`)](/docs/tasty-static), [Server-Side Rendering](/docs/ssr), and [Debug Utilities](/docs/debug).

## By Styling Approach

* **React components**: [React API](/docs/react-api)
* **Zero-client-runtime React with `tasty()`**: [Server-Side Rendering](/docs/ssr), especially the static Astro integration
* **Build-time extraction with `tastyStatic()`**: [Build-Time Extraction](/docs/tasty-static)
* **Hydrated `tasty()` with server collection**: [Server-Side Rendering](/docs/ssr)
* **Upgrading from v2**: [Migration Guide (v2 → v3)](/docs/migration-v3)

## By Task

* **Learn the style language**: [Style DSL](/docs/dsl)
* **Set up linting and autocomplete**: [Getting Started — ESLint plugin](/docs/getting-started#eslint-plugin) and [TypeScript autocomplete](/docs/getting-started#typescript-autocomplete)
* **Design a component's public API** (`styleProps`, `modProps`, `tokenProps`, variants, sub-elements): [React API](/docs/react-api), then [Methodology](/docs/methodology)
* **Generate a color palette with contrast solving**: [Glaze](/docs/#glaze)
* **Brief an AI agent (or yourself) on writing correct styles**: [Style Rules for AI Agents](/docs/ai-agents)
* **Look up a property handler**: [Style Properties](/docs/styles)
* **Define tokens, units, recipes, keyframes, properties, functions, or polyfills globally**: [Configuration](/docs/configuration)
* **Extend Tasty with a plugin, custom handler, or custom prop**: [Plugins & Extension Points](/docs/plugins)
* **Debug generated CSS or cache behavior**: [Debug Utilities](/docs/debug)
* **Understand how selector generation works internally**: [Style rendering pipeline](/docs/pipeline)
* **Understand runtime injection internals**: [Style Injector](/docs/injector)
* **Reproduce and interpret performance measurements**: [Runtime Benchmarks](/docs/runtime-benchmarks)