Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.
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)
- 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.
Usage: npx gluestack-ui init [options]initialize your gluestack-ui and install dependenciesOptions:--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 projectOptions:--all Adds all existing components from gluestack-ui--path <path> Path to add components, defaults to the directory where GluestackUIProvider is located.
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",}}