component-variant

What problem does it solve?

Provides a consistent, repeatable way to define tailwind-variants (tv()) and implement React/React Native components that consume them, reducing duplicated styling, preventing ad-hoc utility usage, and ensuring cross-platform compatibility.

Core Features & Use Cases

• Variant Definitions: Create framework-agnostic tv() definitions that centralize base styles, variants, compoundVariants, and defaultVariants.
• Component Consumption: Build React and React Native components that import variant definitions, export inferred variant prop types, and accept class/className overrides for safe merging.
• Patterns & Compatibility: Support slots for multi-element components, extendable base components, semantic token naming, and Uniwind compatibility for web/native parity.

Quick Start

Create a new tv() definition for a Button in packages/ui/src/variants/button.ts and a corresponding Button component in packages/ui/src/components/Button.tsx that imports the variant and exports the inferred ButtonVariants type.