CLI

The gluestack-ui CLI is a tool that simplifies integrating the gluestack-ui into your project. It provides commands for initialising and adding components to your project.

Important Note

Installation using gluestack-ui CLI in Expo projects supports for Expo SDK 50 and above. For Expo SDK < 49, please refer to the manual installation guide here.

Currently we are working on support for Windows OS. For now, we recommend using the manual installation guide to avoid any issues.

Init

Use init command to set up your project.

The init command adds the necessary gluestack-ui.config.json file, includes the GluestackUIProvider, installs dependencies, and configures above files for your project.

metro.config.js
babel.config.js
next.config.js ( for Next.js)
tailwind.config.js
global.css (for Tailwind CSS)
ts.config.json
entry file (for your project)

npx gluestack-ui init

Important Note

Note: If you wish to make changes to your project manually, you can refer to the installation guide.

Options:

--path <path>: Specifies the directory path where you want to add the GluestackUIProvider component. By default, it creates the component in the components/ui directory within your project's root.
--use-<package>: This flag specifies the package manager to use when initializing gluestack-ui. Supported options are npm (default), yarn, bun, and pnpm. Replace <package> with your preferred package manager.

Usage: npx gluestack-ui init [options]

initialize your gluestack-ui and install dependencies

Options:
  --path <path>    Path to add GluestackUIProvider, defaults to components/ui in the current directory.

Add

Use the add command to add components and their dependencies to your project:

npx gluestack-ui add [component]

Options:

--all: This flag can be used to add all available components from gluestack-ui to your project.
--path <path>: Specifies the directory path where you want to add the component. By default, it will add the component to the same directory where the GluestackUIProvider is located.

Usage: npx gluestack-ui add [component] [options]

add component to your project

Options:
  --all          Adds all existing components from gluestack-ui
  --path <path>  Path to add components, defaults to the directory where GluestackUIProvider is located.
  --use-npm      Set npm as the project's package manager, default
  --use-yarn     Set yarn as the project's package manager
  --use-bun      Set bun as the project's package manager
  --use-pnpm     Set pnpm as the project's package manager, currently not supported in react-native-cli projects

gluestack-ui.config.json

Configuration for your project.

The gluestack-ui.config.json file holds the configuration for your project. It helps the CLI understand how your project is set up and add components accordingly.

Important Note

Note : The gluestack-ui.config.json file is optional. It is only required if you use the CLI to add components to your project. If you prefer to manually copy and paste components, this file is not needed.

Manual creation of gluestack-ui.config.json file is not necessary. It will be automatically generated upon executing the following command:

npx gluestack-ui init

tailwind

tailwind.config

Path to where your tailwind.config.js file is located.

{
  "tailwind": {
    "config": "tailwind.config.js",
  }
}

tailwind.css

Path to the CSS file (global.css) where Tailwind styles are likely imported into your project.

{
  "tailwind": {
    "css": "global.css"
  }
}

app

app.entry

Path to your project's entry file

{
  "app": {
    "entry": "app/_layout.tsx",
  }
}

app.components

Specifies the directory path where the GluestackUIProvider component is located.

{
  "app": {
    "components": "components/ui",
  }
}