gluestack-ui-v4:variants

You create type-safe UI variants using tva by defining base variants, sizes, states, and compound variants within a variant plan, ensuring consistency across your React component library and design system.

Parent-child variant relationships allow contextual styling across sub-components by using parentVariants in tva, enabling a parent component's state or size to automatically dictate the styling of its child components.

Yes, you can extend existing components by adding new variants while preserving compatibility with existing ones, allowing you to layer new styling dimensions onto a component without losing its base configurations.

Yes, TypeScript is required because tva generates robust, type-safe variant plans, ensuring that your React component props and variant dimensions are strictly validated during development.

The best way to plan multiple variant dimensions is using tva to configure base variants, defaultVariants, and compound variants, structuring your design system tokens into manageable, type-safe component styles.

You should use compound variants in tva when you need to apply specific styles based on the combination of multiple variant dimensions, such as applying a unique style only when a component is both a specific size and state.