CLI

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

Init

• 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

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

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

npx gluestack-ui init

tailwind

tailwind.config

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

tailwind.css

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

app

app.entry

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

app.components

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