skills.rest
gluestack
gluestackOFFICIAL
Explore all skills by this author →
Website𝕏@gluestackGitHub

gluestack-ui-v4:components

Implement gluestack-ui v4 components with standardized usage patterns.

1|Updated Jan 30, 2026
Search Tags:#React Native#compound-components#component-patterns#provider-setup#gluestack-ui#enforce-patterns
One-click install
npx skills add https://github.com/gluestack/agent-skills --skill gluestack-ui-v4-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gluestack-ui-v4:components
Source: https://github.com/gluestack/agent-skills/tree/main/.agents/skills/gluestack-ui-v4/components
Command: npx skills add https://github.com/gluestack/agent-skills --skill gluestack-ui-v4-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers implement gluestack-ui v4 components correctly by documenting and enforcing standardized usage patterns, reducing UI inconsistencies and integration errors.

Core Features & Use Cases

  • Enforces component usage rules for gluestack-ui v4 (InputIcon inside InputSlot, Button content with ButtonText, provider setup, etc.).
  • Provides practical patterns and anti-patterns for common components like Input, Button, Card, FormControl, Checkbox, Select.
  • Use cases include building cohesive screens with consistent typography, layout, and interactions across React Native and Web.

Quick Start

Follow the documented patterns to implement a complete UI using gluestack-ui v4 components. Import local components from your ui directory (e.g., Box, Text, Button) and wrap your app with GluestackUIProvider. For reference, verify each component's API against the official docs at https://v4.gluestack.io/ui/docs/components/

Frequently Asked Questions about gluestack-ui-v4:components

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

FAQPage Schema
How do I structure compound components like Input and Button in gluestack-ui v4?▼

Structure gluestack-ui v4 compound components by wrapping sub-components correctly, such as placing InputIcon inside InputSlot and Button content within ButtonText, to prevent UI inconsistencies and integration drift.

What is the correct provider setup for gluestack-ui v4 in React Native?▼

The correct provider setup requires wrapping your application with GluestackUIProvider and importing local components from your ui directory, ensuring consistent styling and behavior across React Native and Web platforms.

Why does my gluestack-ui v4 component render inconsistently across screens?▼

gluestack-ui v4 components render inconsistently when standard usage patterns are ignored, requiring strict adherence to documented anti-patterns and rules for components like Card, Select, and Checkbox to maintain UI cohesion.

Can I use gluestack-ui v4 components for both Web and React Native?▼

Yes, gluestack-ui v4 supports both Web and React Native, providing standardized patterns to build cohesive screens with consistent typography, layout, and interactions across both platforms.

What are the best practices for using FormControl and Select components in gluestack-ui?▼

Best practices for gluestack-ui FormControl and Select involve following codified patterns to reduce onboarding effort, ensuring correct sub-component usage and verifying APIs against official documentation.

Related Skills

Explore More Software Engineering Skills→
sbsbhongsbsbhong

gluestack-ui-v4:setup

Initialize gluestack-ui v4 and configure components in React Native, Expo, and Next.js projects.

Community
Basic
AgentientAgentient
2

typescript-component-testing

Automates React component testing in TypeScript using Jest, Vitest, and React Testing Library.

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

react-native-web-styling

Provide styling patterns for React Native Web components using StyleSheet, theming, and responsive design.

Official
Intermediate
contatomayconcontatomaycon

vercel-react-native-skills

Standardize React Native and Expo app performance and architecture best practices.

Community
Advanced