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.

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",
}
}