# Better Styled

> Type-safe styled components with variant propagation for React and React Native

## Docs

- [llms.txt and llms-full.txt files](https://better-styled.com/ai/llms-txt.md): Machine-readable documentation index and full content files for AI assistants.
- [MCP Server for real-time documentation access](https://better-styled.com/ai/mcp-server.md): Connect better-styled documentation directly to AI tools via Model Context Protocol.
- [Connect better-styled docs to AI assistants](https://better-styled.com/ai/overview.md): This documentation is optimized for AI. Connect it to Claude, ChatGPT, Cursor, and other tools for accurate code generation.
- [skill.md capability file](https://better-styled.com/ai/skill-md.md): A structured file that tells AI agents what better-styled can do and how to use it correctly.
- [API reference for creating styled contexts](https://better-styled.com/api/create-styled-context.md): Creates a context for sharing variants between parent and child components.
- [API reference for the styled function](https://better-styled.com/api/styled.md): Creates a styled component with variant support. The core function of better-styled.
- [API reference for the styledConfig function](https://better-styled.com/api/styled-config.md): Creates a typed config object shared between multiple styled components. Same type inference as styled() — zero generics needed.
- [API reference for cn()](https://better-styled.com/api/utilities.md): Merges class names with Tailwind conflict resolution. Combines clsx and tailwind-merge.
- [API reference for creating compound components with slots](https://better-styled.com/api/with-slots.md): Attaches child components as static properties, creating compound components with dot notation like <Card.Header>.
- [How better-styled compares to other variant libraries](https://better-styled.com/comparison.md): Choosing the right variant library for your project? Here's how better-styled compares to Tailwind Variants, CVA, Windstitch, and classnames.
- [Share variants between parent and child components](https://better-styled.com/concepts/context.md): Context is what makes better-styled special. It lets parent components share their variants with children automatically.
- [Build compound components with the slots pattern](https://better-styled.com/concepts/slots.md): Slots let you build compound components with intuitive dot notation, like <Card.Header> or <Button.Icon>.
- [The core function for creating styled components](https://better-styled.com/concepts/styled.md): The styled() function is the heart of better-styled. It takes any React component (or HTML element) and adds variant support.
- [Understanding the variant system](https://better-styled.com/concepts/variants.md): Variants are the building blocks of your component API. They let you define discrete style options that users can mix and match.
- [Patterns and recommendations for better-styled](https://better-styled.com/guides/best-practices.md): Recommended patterns, performance tips, and common pitfalls to avoid.
- [Using better-styled with React Native and Expo](https://better-styled.com/guides/react-native.md): The API is identical to web - just use React Native components instead of HTML elements. Works with NativeWind and Uniwind.
- [Getting the most out of type inference](https://better-styled.com/guides/typescript.md): better-styled is built with TypeScript from the ground up. Types are inferred automatically - no manual typing needed.
- [Install better-styled in your project](https://better-styled.com/installation.md): Get started with better-styled in under a minute. Works with React, React Native, Expo, Next.js, Vite, and more.
- [Introduction](https://better-styled.com/introduction.md): Type-safe styled components with variant propagation for React and React Native. A minimalist approach to building consistent UI components.
- [Build your first component with better-styled](https://better-styled.com/quickstart.md): Learn the three core concepts: styled(), createStyledContext(), and withSlots().

## OpenAPI Specs

- [openapi](https://better-styled.com/api-reference/openapi.json)