gluestack-ui-v4:variants

To create UI component variants for Gluestack UI v4, define a TVA-based style set for your target component and apply it using variant and size props. This enables project-specific styling while preserving design-system consistency.

You can extend existing Gluestack UI components with new type-safe variants using TVA. This approach preserves existing behavior, compound variants, and parent-child relationships while adding your custom styling patterns.

Yes, Gluestack UI v4 supports multi-dimensional variants across base components like Button, Card, and Badge. It handles parent-child relationships and compound variants for complex states using TVA.

TVA enforces type-safe variant definitions for Gluestack UI components. It includes semantic token usage and defaults, ensuring consistent theming across light and dark modes while maintaining strict type safety.

Yes, you can add a gradient button variant that works across dark and light modes and automatically inherits typography from the design system. This is achieved by applying TVA with semantic token usage and defaults.

Using TVA with Gluestack UI v4 is an effective way to manage complex component states. It allows you to define multi-dimensional variants and compound variants, ensuring robust and consistent design-system styling.