gluestack-ui logopreview
Docs
Blog
Get Updates
Prompt to React Native
IntroductionQuick Start
InstallationTooling SetupVS Code ExtensionsFigma UI KitCLIgluestack-ui-nativewind-utils
AccessibilityUniversal
Benchmarks
Default TokensCustomizing ThemeDark Mode
All Components
HeadingrscTextrsc
BoxrscCenterrscDividerHStackrscVStackrscGridalpha, rsc
AlertProgressSpinnerToast
BadgeCardrscTablealphaTabsalpha
ButtonCheckboxDateTimePickerCalendarFormControlInputLinkPressableRadioSelectSliderSwitchTextarea
AlertDialogDrawerLiquid GlassMenuModalPopoverPortalTooltipImage Viewer
ActionsheetAccordionBottomSheetalpha
AvatarImageIconrsc
FabSkeletonalpha, rsc
useBreakPointValueuseMediaQuery
Dashboard AppKitchensink AppTodo AppStarter KitAppLighter
LinearGradient
Building Ecommerce App
Upgrade to v2Upgrade to v3Upgrade to v4FAQsReleasesChangelogRoadmapTroubleshootingDiscord FAQs

Installation

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

Step 1: Setup your project

If you are starting with a new project, setup your project with
Next.js
or
Expo
If you already have a project, you can skip this step.

Prerequisites

Ensure you have the following prerequisites installed on your project to use gluestack-ui CLI:
Package NameSupported VersionsUpcoming Support
next
13 <= versions <= 15-
react-native
versions >= 72.5-
expo
versions >= 50-
node
versions > 16-

Step 2: Initialize

Go to your project, and use the
init
command at the root of your project to add
GluestackUIProvider
and essential components (
icon
,
overlay
,
toast
) to your project.
npx gluestack-ui@alpha init
Your project is now ready to use gluestack-ui components. To add gluestack-ui components to your project using the CLI, refer to the above command or use the
CLI guide
.
npx gluestack-ui@alpha add box
If you encounter issues during the CLI installation, refer to the manual installation guide available.

Common issues

Expo app stuck in
tailwindcss(ios) rebuilding...
while running
expo start
command
In this case, you may have your app stored in a directory with a name containing spaces, such as 'Expo App', renaming it to just 'Expo-App' will resolve the issue.
Edit this page on GitHub
Go backQuick Start
Up nextTooling Setup
Go backQuick Start
Up nextTooling Setup