setup_skill

This skill guides you through installing gluestack-ui v4 via CLI or Manual, ensuring correct setup and ready-to-use components.

0

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill gluestack/agent-skills --skill setup

SKILL.md3.9 KB

Overview

This skill guides developers through installing gluestack-ui v4 using only the official v4 Installation documentation. It covers the two supported paths — CLI and Manual — and highlights strict v4-only rules, required packages, and common pitfalls. Follow these steps to get Gluestack UI components (GluestackUIProvider, icon, overlay, toast) correctly added to Next.js or Expo projects.

How this skill works

For CLI installation the skill instructs running the single supported command from your project root to initialize gluestack-ui v4 and optionally add components. For Manual installation it points you to the Manual tab on the official v4 Installation page and summarizes the exact v4 packages and files to include. It enforces that only v4 docs/packages are used and explains the common Expo/tailwind issue and its fix.

When to use it

Setting up gluestack-ui v4 in a new Next.js or Expo project.
Adding gluestack-ui v4 to an existing React Native or Expo app.
When you need a strict, v4-only installation path to avoid v1/v2/v3 conflicts.
If CLI installation fails and you must follow the Manual tab on v4 docs.
When preparing to use core components like GluestackUIProvider, icon, overlay, and toast.

Best practices

Use only the v4 docs and commands at v4.gluestack.io — do not follow non-v4 guides.
For CLI init, run exactly: npx gluestack-ui@alpha init -y from the project root.
Add components via the CLI add commands (single or --all) only after init.
If installing manually, follow the Manual tab on the v4 Installation page exactly.
Avoid installing any v1/v2/v3 packages such as @gluestack/styled or @gluestack-ui/themed.

Example use cases

Initialize gluestack-ui v4 in a fresh Next.js 13–15 project using the CLI command.
Add a Box component to an Expo app via npx gluestack-ui@alpha add box after init.
Follow Manual tab instructions to integrate GluestackUIProvider and core utils without the CLI.
Fix an Expo tailwind rebuild hang by renaming the project folder to remove spaces.

FAQ

No. Only v4 packages and the v4.gluestack.io documentation should be used; older packages and non-v4 docs are incompatible.

What exact CLI command initializes v4?

Run npx gluestack-ui@alpha init -y from your project root to initialize v4.