creating-components_skill

Overview

This skill is a concise, practical guide for creating components with gluestack-ui v4. It walks through planning, file structure, TypeScript patterns, styling with semantic tokens and tva, and common component patterns like compound components, forms, and interactive UI. The content focuses on reproducible templates and recipes you can drop into a project.

How this skill works

The guide inspects component needs, recommends using Gluestack wrappers instead of primitives, and outlines a step-by-step workflow from planning to implementation. It provides ready-to-use TypeScript templates for simple components, variant-driven components using tva, compound patterns, form controls, interactive stateful components, and loading patterns. Each template emphasizes accessibility, props design, and consistent styling via semantic tokens.

When to use it

• Creating a new UI element that reuses Gluestack primitives and tokens.
• Implementing variant-driven visuals (sizes, color variants) using tva.
• Building compound components with independent sub-components (Header, Body, Footer).
• Adding form inputs with validation, icons, and helper/error messages.
• Developing interactive elements with internal state or async loading behavior.

Best practices

• Plan purpose, required sub-components, props, and variants before coding.
• Always use Gluestack UI wrappers (Box, Text, Input, etc.) instead of raw primitives.
• Expose size/variant/state props and accept className for overrides.
• Use tva for variant management and parentVariants for child styling.
• Wrap form fields in FormControl with InputSlot for icons and consistent error handling.

Example use cases

• ProfileCard: image, heading, email and optional bio using Box, HStack, VStack.
• Alert component: tva-managed variants for default, success, warning, destructive.
• Card compound pattern: Card, CardHeader, CardBody, CardFooter for flexible composition.
• EmailInput form control: icon slot, focus state, keyboard type, error and helper text.
• Accordion: internal expanded state with Pressable and conditional content rendering.