gluestack-ui-v5:setup

Installs and configures gluestack-ui v5 with NativeWind v5 or UniWind on Tailwind CSS v4.

Updated Sep 13, 2026
One-click install
npx skills add https://github.com/aadilmallick/myfitness-pal-clone --skill gluestack-ui-v5-setup-aadilmallick
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gluestack-ui-v5:setup
Source: https://github.com/aadilmallick/myfitness-pal-clone/tree/main/.agents/skills/gluestack-ui-v5/setup
Command: npx skills add https://github.com/aadilmallick/myfitness-pal-clone --skill gluestack-ui-v5-setup-aadilmallick

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up gluestack-ui v5 involves choosing between two styling engines (NativeWind v5 and UniWind), configuring Tailwind CSS v4 without a tailwind.config.js, and wiring up Metro, PostCSS, Babel, and type declaration files correctly. This Skill provides the exact package versions, config files, and troubleshooting steps so the setup works on the first attempt. ## Core Features & Use Cases - CLI-guided setup: Initialize a project with npx gluestack-ui@latest init, add individual or all components, and handle v4-to-v5 migration with the @alpha tag. - Manual NativeWind v5 path: Full instructions for Expo and React Native CLI including the required lightningcss 1.30.1 pin, PostCSS config, and Metro wrapper. - Manual UniWind path: A simpler Expo-only setup without PostCSS, including theme switching via Uniwind.setTheme() and correct top-level .dark/.light selectors. - Use Case: You are building an Expo app and want themed UI components. Follow the UniWind path to install packages, create global.css with semantic color tokens, wrap Metro with withUniwindConfig, and start adding gluestack components. ## Quick Start Set up gluestack-ui v5 in my Expo project using UniWind and add the button component.

Frequently Asked Questions about gluestack-ui-v5:setup

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

FAQPage Schema
How do I install gluestack-ui v5 in an Expo project?

Run `npx gluestack-ui@latest init` from your project root to add the GluestackUIProvider and essential components, then add components with `npx gluestack-ui@latest add button` or `--all`. Prerequisites are react-native >= 0.76, expo >= 52, and node >= 18.

NativeWind v5 vs UniWind for gluestack-ui v5?

NativeWind v5 supports Expo and React Native CLI but requires PostCSS and a lightningcss 1.30.1 pin. UniWind is Expo-only but skips PostCSS and the lightningcss pin, making setup simpler. Both run on Tailwind CSS v4.

Does gluestack-ui v5 support Next.js?

No, Next.js support is pending NativeWind v5 web support. The documentation recommends using gluestack-ui v4 for Next.js projects until v5 web support lands.

How do I migrate from gluestack-ui v4 to v5?

Use the alpha CLI: run `npx gluestack-ui@alpha upgrade`, then `npx gluestack-ui@alpha add gluestack-ui-provider` and `add --all`. Afterwards delete tailwind.config.js since Tailwind v4 is CSS-first, and remove any tailwind.config alias from babel.config.js.

Why does NativeWind v5 fail to build?

NativeWind v5 requires lightningcss pinned to exactly 1.30.1 in both `overrides` and `resolutions` in package.json. After pinning, delete node_modules and reinstall to resolve build errors.

Why is dark mode not applying on Expo Web with UniWind?

The `.dark {}` and `.light {}` selectors in global.css must be top-level inside `@layer theme`, never nested inside `:root {}`. Nested selectors do not match when UniWind transforms them for web.