gluestack-ui-v5:variants

Use tva from @gluestack-ui/utils/nativewind-utils to define base styles, variant dimensions, and defaultVariants, then apply the generated function to your component's className. Wrap the result in a typed React component that accepts variant props and supports className overrides via the class parameter.

Define additional variant styles with tva, then create a wrapper component whose variant type unions the original options with your new ones. Route built-in variants to the standard Button props and apply custom variant classes through className for the new options.

tva is Tailwind Variant Authority, a utility for creating type-safe, composable Tailwind class variants. It supports base styles, multiple variant dimensions, compoundVariants for specific combinations, and parentVariants so child components respond to parent state.

Yes, share the parent's variant values through React context and define parentVariants in the child's tva config. Children like CardHeader then receive the parent's variant and colorScheme to compute their own styles.

Check that your Tailwind config includes the tva patterns, verify className merge order, and ensure no conflicting inline styles override the generated classes. For parentVariants, confirm the context provider wraps the child components.

Skip variants for one-off custom styles, simple modifications achievable with existing props plus className, and styles that belong in the global design system. Variants are for repeated patterns, brand-specific styles, and prop-driven conditional styling.