메뉴
Guide for installing gluestack-ui v4 per the official Installation doc - CLI and Manual paths only. Follow https://v4.gluestack.io/ui/docs/home/getting-started/installation strictly.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Enforces constrained, opinionated styling patterns for gluestack-ui v4. Main overview skill that coordinates specialized sub-skills for setup, components, styling, variants, performance, and validation.
Migrate a gluestack-ui project from v2, v3, or v4 to v5 (NativeWind v5 or UniWind). Covers automated CLI upgrade and manual step-by-step migration for all source versions.
Main entry point for gluestack-ui contributor tasks and workflows
Create a new React Native/Expo component with guided workflow following compound component API pattern
Create or modify gluestack-core and gluestack-utils packages for component creators and utilities
Component usage patterns for gluestack-ui v4 - covers component selection, props vs className, compound patterns, icons, and provider setup.
| name | gluestack-ui-v4:setup |
| description | Guide for installing gluestack-ui v4 per the official Installation doc - CLI and Manual paths only. Follow https://v4.gluestack.io/ui/docs/home/getting-started/installation strictly. |
This sub-skill follows the official gluestack-ui v4 installation guide only. Nothing is followed from outside Installation | gluestack-ui v4.
Use either CLI or Manual as defined on that page.
@gluestack/styled, @gluestack-ui/themed, or any packages/docs from gluestack.io (without the v4. subdomain). Those are for v1/v2/v3.@gluestack-ui/core, @gluestack-ui/utils, NativeWind, and components copied into your app (e.g. GluestackUIProvider, icon, overlay, toast). Manual installation for v4 is only the Manual tab on the v4 Installation page – not any other “manual” or “gluestack styled” guide.Ensure these prerequisites are satisfied to use the gluestack-ui CLI:
| Package Name | Supported Versions | Upcoming Support |
|---|---|---|
| next | 13 <= versions <= 15 | - |
| react-native | versions >= 72.5 | - |
| expo | versions >= 50 | - |
| node | versions > 16 | - |
To initialize gluestack-ui v4 via CLI, use only this command (from your project root):
npx gluestack-ui init -y
This adds GluestackUIProvider and essential components (icon, overlay, toast). Do not use any other command or method for CLI initialization.
After init, your project is ready to use gluestack-ui components. To add more components via CLI, use the add command or the CLI guide. Example:
npx gluestack-ui add box
or
npx gluestack-ui add --all -y
If you run into issues during CLI installation, use the manual installation guide (Manual tab on the same Installation page).
For installation without the CLI, use only the Manual tab on the v4 Installation page:
Do not:
v4.), or from blog posts, Stack Overflow, or other guides that reference v1/v2/v3.@gluestack-ui/core, @gluestack-ui/utils, NativeWind, and the provider/components from the v4 Manual tab only.Expo app stuck in tailwindcss(ios) rebuilding... while running expo start
Expo App).Expo-App).@gluestack/styled or v1/v2/v3.