gluestack-ui-v4:variants

Generate type-safe Gluestack UI v4 variants with tva.

Updated Mar 2, 2026

Search Tags:#typescript #ui #react #components #variant #tva #gluestack-ui

Ready to run

npx skills add https://github.com/xiaobuliukun/skills --skill gluestack-ui-v4-variants-xiaobuliukun

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gluestack-ui-v4:variants
Source: https://github.com/xiaobuliukun/skills/tree/main/gluestack-ui-v4/variants
Command: npx skills add https://github.com/xiaobuliukun/skills --skill gluestack-ui-v4-variants-xiaobuliukun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides developers in creating and managing custom, type-safe UI variants for Gluestack UI v4 components using tva to ensure consistency across a design system.

Core Features & Use Cases

Variant planning and management with base variants, sizes, states, and compound variants using tva.
Extending existing components by adding new variants while preserving compatibility with existing ones.
Support for parent-child variant relationships and contextual styling across sub-components in a design system.

Quick Start

Define a new variant plan with tva and apply it to a component to render a concrete example.

Frequently Asked Questions about gluestack-ui-v4:variants

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create type-safe UI variants for React components using tva?▼

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.

What are parent-child variant relationships in a React 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.

Can I extend existing UI components with new variants without breaking compatibility?▼

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.

Do I need TypeScript to manage UI component variants with tva?▼

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.

What is the best way to plan multiple variant dimensions for a design system?▼

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.

When should I use compound variants in React UI components?▼

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.