Installation

To get started with gluestack-ui, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects.
Automatic
Manual

Automatic

Using Template

Coming soon

Using CLI

If you wish to use gluestack-ui in your existing project using CLI, you can proceed with the following steps:

Step 1: Initialize

Use init command to add GluestackUIProvider and gluestack-ui-provider/config.ts file into your project.
npx gluestack-ui init
You will be asked to select a component style to initialize
Which style would you like to use in your project:
gluestack-style
nativewind
Refer step: 4 in manual installation for usage of GluestackUIProvider

Step 3: Add components

To add components you wish to use in your project, you can use add command as shown below.
npx gluestack-ui add button
To add all the components, you can use
npx gluestack-ui add --all

Manual

If you wish to install gluestack-ui into your existing project, you can proceed with the following steps:

Step 1: Install dependencies

First, install the dependencies of gluestack-ui in your project. This can be done using the following command:
yarn add @gluestack-style/react react-native-web react-native-svg@13.4.0
OR
npm i @gluestack-style/react react-native-web react-native-svg@13.4.0

Step 1.5 (For Next.js):

Please follow this link

Step 2: Configure components path

Create a components/ folder inside src folder and add path in tsconfig.json
// ... (other configs)
compilerOptions: {
// ...
"paths": {
// ...
"@/*": ["./src/*"] // Add relative path
},
}

Step 3: Configure GluestackUIProvider

To add config, create a gluestack-ui-provider/config.ts file in your components/ui folder and paste the following code.
"use client"
import { AnimationResolver } from "@gluestack-style/animation-resolver"
import { MotionAnimationDriver } from "@gluestack-style/legend-motion-animation-driver"
import { createConfig } from "@gluestack-style/react"
export const config = createConfig({
aliases: {
bg: "backgroundColor",
bgColor: "backgroundColor",
h: "height",
w: "width",
p: "padding",
px: "paddingHorizontal",
py: "paddingVertical",
pt: "paddingTop",
pb: "paddingBottom",
pr: "paddingRight",
pl: "paddingLeft",
m: "margin",
mx: "marginHorizontal",
my: "marginVertical",
mt: "marginTop",
mb: "marginBottom",
mr: "marginRight",
ml: "marginLeft",
rounded: "borderRadius",
} as const,
tokens: {
colors: {
// Brand Colors
primary0: "#B3B3B3",
primary50: "#999999",
primary100: "#808080",
primary200: "#737373",
primary300: "#666666",
primary400: "#525252",
primary500: "#333333",
primary600: "#292929",
primary700: "#1F1F1F",
primary800: "#0D0D0D",
primary900: "#0A0A0A",
primary950: "#080808",
secondary0: "#FEFFFF",
secondary50: "#F1F2F2",
secondary100: "#E7E8E8",
secondary200: "#DBDBDB",
secondary300: "#AFB0B0",
secondary400: "#727373",
secondary500: "#5E5F5F",
secondary600: "#515252",
secondary700: "#3F4040",
secondary800: "#272626",
secondary900: "#181717",
secondary950: "#0B0C0C",
tertiary0: "#FFFAF5",
tertiary50: "#FFF2E5",
tertiary100: "#FFE9D5",
tertiary200: "#FED1AA",
tertiary300: "#FDB474",
tertiary400: "#FB9D4B",
tertiary500: "#E78128",
tertiary600: "#D7751F",
tertiary700: "#B4621A",
tertiary800: "#824917",
tertiary900: "#6C3D13",
tertiary950: "#543112",
// Action Colors
error00: "#FEE9E9",
error50: "#FEE2E2",
error100: "#FECACA",
error200: "#FCA5A5",
error300: "#F87171",
error400: "#EF4444",
error500: "#E63535",
error600: "#DC2626",
error700: "#B91C1C",
error800: "#991B1B",
error900: "#7F1D1D",
error950: "#531313",
success0: "#E4FFF4",
success50: "#CAFFE8",
success100: "#A2F1C0",
success200: "#84D3A2",
success300: "#66B584",
success400: "#489766",
success500: "#348352",
success600: "#2A7948",
success700: "#206F3E",
success800: "#166534",
success900: "#14532D",
success950: "#1B3224",
warning0: "#FFFDFB",
warning50: "#FFF9F5",
warning100: "#FFE7D5",
warning200: "#FECDAA",
warning300: "#FDAD74",
warning400: "#FB954B",
warning500: "#E77828",
warning600: "#D76C1F",
warning700: "#B45A1A",
warning800: "#824417",
warning900: "#6C3813",
warning950: "#542D12",
info0: "#ECF8FE",
info50: "#C7EBFC",
info100: "#A2DDFA",
info200: "#7CCFF8",
info300: "#57C2F6",
info400: "#32B4F4",
info500: "#0DA6F2",
info600: "#0B8DCD",
info700: "#0973A8",
info800: "#075A83",
info900: "#05405D",
info950: "#032638",
// Property Derived Colors
text0: "#FEFEFF",
text50: "#F5F5F5",
text100: "#E5E5E5",
text200: "#DBDBDC",
text300: "#D4D4D4",
text400: "#A3A3A3",
text500: "#8C8C8C",
text600: "#737373",
text700: "#525252",
text800: "#404040",
text900: "#262627",
text950: "#171717",
border0: "#FDFEFE",
border50: "#F3F3F3",
border100: "#E6E6E6",
border200: "#DDDCDB",
border300: "#D3D3D3",
border400: "#A5A3A3",
border500: "#8C8D8D",
border600: "#737474",
border700: "#535252",
border800: "#414141",
border900: "#272624",
border950: "#1A1717",
background0: "#FBFBFB",
background50: "#F6F6F6",
background100: "#F2F1F1",
background200: "#DCDBDB",
background300: "#D5D4D4",
background400: "#A2A3A3",
background500: "#8E8E8E",
background600: "#747474",
background700: "#535252",
background800: "#414040",
background900: "#272625",
background950: "#181718",
// StandAlone Colors
backgroundError: "#FEF1F1",
backgroundWarning: "#FFF4EB",
backgroundSuccess: "#EDFCF2",
backgroundMuted: "#F6F6F7",
backgroundInfo: "#EBF8FE",
white: "#FFFFFF",
black: "#000000",
// Extended Colors
rose50: "#fff1f2",
rose100: "#ffe4e6",
rose200: "#fecdd3",
rose300: "#fda4af",
rose400: "#fb7185",
rose500: "#f43f5e",
rose600: "#e11d48",
rose700: "#be123c",
rose800: "#9f1239",
rose900: "#881337",
pink50: "#fdf2f8",
pink100: "#fce7f3",
pink200: "#fbcfe8",
pink300: "#f9a8d4",
pink400: "#f472b6",
pink500: "#ec4899",
pink600: "#db2777",
pink700: "#be185d",
pink800: "#9d174d",
pink900: "#831843",
fuchsia50: "#fdf4ff",
fuchsia100: "#fae8ff",
fuchsia200: "#f5d0fe",
fuchsia300: "#f0abfc",
fuchsia400: "#e879f9",
fuchsia500: "#d946ef",
fuchsia600: "#c026d3",
fuchsia700: "#a21caf",
fuchsia800: "#86198f",
fuchsia900: "#701a75",
purple50: "#faf5ff",
purple100: "#f3e8ff",
purple200: "#e9d5ff",
purple300: "#d8b4fe",
purple400: "#c084fc",
purple500: "#a855f7",
purple600: "#9333ea",
purple700: "#7e22ce",
purple800: "#6b21a8",
purple900: "#581c87",
violet50: "#f5f3ff",
violet100: "#ede9fe",
violet200: "#ddd6fe",
violet300: "#c4b5fd",
violet400: "#a78bfa",
violet500: "#8b5cf6",
violet600: "#7c3aed",
violet700: "#6d28d9",
violet800: "#5b21b6",
violet900: "#4c1d95",
indigo50: "#eef2ff",
indigo100: "#e0e7ff",
indigo200: "#c7d2fe",
indigo300: "#a5b4fc",
indigo400: "#818cf8",
indigo500: "#6366f1",
indigo600: "#4f46e5",
indigo700: "#4338ca",
indigo800: "#3730a3",
indigo900: "#312e81",
blue50: "#eff6ff",
blue100: "#dbeafe",
blue200: "#bfdbfe",
blue300: "#93c5fd",
blue400: "#60a5fa",
blue500: "#3b82f6",
blue600: "#2563eb",
blue700: "#1d4ed8",
blue800: "#1e40af",
blue900: "#1e3a8a",
lightBlue50: "#f0f9ff",
lightBlue100: "#e0f2fe",
lightBlue200: "#bae6fd",
lightBlue300: "#7dd3fc",
lightBlue400: "#38bdf8",
lightBlue500: "#0ea5e9",
lightBlue600: "#0284c7",
lightBlue700: "#0369a1",
lightBlue800: "#075985",
lightBlue900: "#0c4a6e",
darkBlue50: "#dbf4ff",
darkBlue100: "#addbff",
darkBlue200: "#7cc2ff",
darkBlue300: "#4aa9ff",
darkBlue400: "#1a91ff",
darkBlue500: "#0077e6",
darkBlue600: "#005db4",
darkBlue700: "#004282",
darkBlue800: "#002851",
darkBlue900: "#000e21",
cyan50: "#ecfeff",
cyan100: "#cffafe",
cyan200: "#a5f3fc",
cyan300: "#67e8f9",
cyan400: "#22d3ee",
cyan500: "#06b6d4",
cyan600: "#0891b2",
cyan700: "#0e7490",
cyan800: "#155e75",
cyan900: "#164e63",
teal50: "#f0fdfa",
teal100: "#ccfbf1",
teal200: "#99f6e4",
teal300: "#5eead4",
teal400: "#2dd4bf",
teal500: "#14b8a6",
teal600: "#0d9488",
teal700: "#0f766e",
teal800: "#115e59",
teal900: "#134e4a",
emerald50: "#ecfdf5",
emerald100: "#d1fae5",
emerald200: "#a7f3d0",
emerald300: "#6ee7b7",
emerald400: "#34d399",
emerald500: "#10b981",
emerald600: "#059669",
emerald700: "#047857",
emerald800: "#065f46",
emerald900: "#064e3b",
green50: "#f0fdf4",
green100: "#dcfce7",
green200: "#bbf7d0",
green300: "#86efac",
green400: "#4ade80",
green500: "#22c55e",
green600: "#16a34a",
green700: "#15803d",
green800: "#166534",
green900: "#14532d",
lime50: "#f7fee7",
lime100: "#ecfccb",
lime200: "#d9f99d",
lime300: "#bef264",
lime400: "#a3e635",
lime500: "#84cc16",
lime600: "#65a30d",
lime700: "#4d7c0f",
lime800: "#3f6212",
lime900: "#365314",
yellow50: "#fefce8",
yellow100: "#fef9c3",
yellow200: "#fef08a",
yellow300: "#fde047",
yellow400: "#facc15",
yellow500: "#eab308",
yellow600: "#ca8a04",
yellow700: "#a16207",
yellow800: "#854d0e",
yellow900: "#713f12",
amber50: "#fffbeb",
amber100: "#fef3c7",
amber200: "#fde68a",
amber300: "#fcd34d",
amber400: "#fbbf24",
amber500: "#f59e0b",
amber600: "#d97706",
amber700: "#b45309",
amber800: "#92400e",
amber900: "#78350f",
orange50: "#fff7ed",
orange100: "#ffedd5",
orange200: "#fed7aa",
orange300: "#fdba74",
orange400: "#fb923c",
orange500: "#f97316",
orange600: "#ea580c",
orange700: "#c2410c",
orange800: "#9a3412",
orange900: "#7c2d12",
red50: "#fef2f2",
red100: "#fee2e2",
red200: "#fecaca",
red300: "#fca5a5",
red400: "#f87171",
red500: "#ef4444",
red600: "#dc2626",
red700: "#b91c1c",
red800: "#991b1b",
red900: "#7f1d1d",
warmGray50: "#fafaf9",
warmGray100: "#f5f5f4",
warmGray200: "#e7e5e4",
warmGray300: "#d6d3d1",
warmGray400: "#a8a29e",
warmGray500: "#78716c",
warmGray600: "#57534e",
warmGray700: "#44403c",
warmGray800: "#292524",
warmGray900: "#1c1917",
trueGray50: "#fafafa",
trueGray100: "#f5f5f5",
trueGray200: "#e5e5e5",
trueGray300: "#d4d4d4",
trueGray400: "#a3a3a3",
trueGray500: "#737373",
trueGray600: "#525252",
trueGray700: "#404040",
trueGray800: "#262626",
trueGray900: "#171717",
coolGray50: "#f9fafb",
coolGray100: "#f3f4f6",
coolGray200: "#e5e7eb",
coolGray300: "#d1d5db",
coolGray400: "#9ca3af",
coolGray500: "#6b7280",
coolGray600: "#4b5563",
coolGray700: "#374151",
coolGray800: "#1f2937",
coolGray900: "#111827",
blueGray50: "#f8fafc",
blueGray100: "#f1f5f9",
blueGray200: "#e2e8f0",
blueGray300: "#cbd5e1",
blueGray400: "#94a3b8",
blueGray500: "#64748b",
blueGray600: "#475569",
blueGray700: "#334155",
blueGray800: "#1e293b",
blueGray900: "#0f172a",
},
space: {
px: "1px",
"0": 0,
"0.5": 2,
"1": 4,
"1.5": 6,
"2": 8,
"2.5": 10,
"3": 12,
"3.5": 14,
"4": 16,
"4.5": 18,
"5": 20,
"6": 24,
"7": 28,
"8": 32,
"9": 36,
"10": 40,
"11": 44,
"12": 48,
"16": 64,
"20": 80,
"24": 96,
"32": 128,
"40": 160,
"48": 192,
"56": 224,
"64": 256,
"72": 288,
"80": 320,
"96": 384,
"1/2": "50%",
"1/3": "33.333%",
"2/3": "66.666%",