gluestack-ui logo
Get Updates
Prompt to React Native UI
Home
Components
Hooks
Apps
MCP Server
Guides
Home
Overview
IntroductionQuick Start
Getting Started
InstallationTooling SetupVS Code ExtensionsFigma UI KitCLIgluestack-ui-nativewind-utils
Core Concepts
AccessibilityUniversal
Performance
Benchmarks
Theme Configuration
Default TokensCustomizing ThemeDark Mode
Components
All Components
Typography
HeadingrscTextrsc
Layout
BoxrscCenterrscDividerHStackrscVStackrscGridalpha, rsc
Feedback
AlertProgressSpinnerToast
Data Display
BadgeCardrscTablealpha
Forms
ButtonCheckboxFormControlInputLinkPressableRadioSelectSliderSwitchTextarea
Overlay
AlertDialogDrawerMenuModalPopoverPortalTooltip
Disclosure
ActionsheetAccordionBottomSheetalpha
Media And Icons
AvatarImageIconrsc
Others
FabSkeletonalpha, rsc
Hooks
useBreakPointValue
useMediaQuery
Apps
Dashboard App
Kitchensink App
Todo App
Starter Kit
MCP Server
MCP Server
Guides
Recipes
LinearGradient
Tutorials
Building Ecommerce App
More
Upgrade to v2Upgrade to v3FAQsReleasesRoadmapTroubleshootingDiscord FAQs

Default Tokens

gluestack-ui v3 ships with default tokens, including colored tokens that provide access to theme values and flexibility to build and customize your own themed UI components.
Theming in
@gluestack-ui v3
is based on the Styled System Theme Specification.

Colors

We recommend adding a palette that ranges from 50 to 900. Tools like JSON Color Palette Generator, Smart Swatch or Palx are available to generate these palettes. Below are the default color palette tokens provided in the gluestack-ui default config.
primary
0#a6a6a6
50#afafaf
100#bababa
200#c5c5c5
300#d4d4d4
400#dddddd
500#e6e6e6
600#f0f0f0
700#fafafa
800#fdfdfd
900#fef9f9
950#fdfcfc
secondary
0#141414
50#171717
100#1f1f1f
200#272727
300#2c2c2c
400#383939
500#3f4040
600#565656
700#6e6e6e
800#878787
900#969696
950#a4a4a4
tertiary
50#6c3d13
100#824917
200#b4621a
300#d7751f
400#e78128
500#fb9d4b
600#fdb474
700#fed1aa
800#ffe9d5
900#fff2e5
950#fffaf5
error
0#531313
50#7f1d1d
100#991b1b
200#b91c1c
300#dc2626
400#e63535
500#ef4444
600#f96160
700#e55b5a
800#fecaca
900#fee2e2
950#fee9e9
success
0#1b3224
50#14532d
100#166534
200#206f3e
300#2a7948
400#348352
500#489766
600#66b584
700#84d3a2
800#a2f1c0
900#caffe8
950#e4fff4
warning
0#542d12
50#6c3813
100#824417
200#b45a1a
300#d76c1f
400#e77828
500#fb954b
600#fdad74
700#fecdaa
800#ffe7d5
900#fff4ed
950#fff9f5
info
0#032638
50#05405d
100#075a83
200#0973a8
300#0b8dcd
400#0da6f2
500#32b4f4
600#57c2f6
700#7ccff8
800#a2ddfa
900#c7ebfc
950#ecf8fe
typography
0#171717
50#262627
100#404040
200#525252
300#737373
400#8c8c8c
500#a3a3a3
600#d4d4d4
700#dbdbdc
800#e5e5e5
900#f5f5f5
950#fefeff
white#FFFFFF
gray#D4D4D4
black#181718
outline
0#1a1717
50#272624
100#414141
200#535252
300#737474
400#8c8d8d
500#a5a3a3
600#d3d3d3
700#dddcdb
800#e6e6e6
900#f3f3f3
950#fdfefe
background
0#121212
50#272625
100#414040
200#535252
300#747474
400#8e8e8e
500#a2a3a3
600#d5d4d4
700#e5e4e4
800#f2f1f1
900#f6f6f6
950#ffffff
error#422b2b
warning#412f23
muted#333333
success#1c2b21
info#1a282e
light#FBFBFB
dark#181719
indicator
primary#f7f7f7
info#a1c7f5
error#e84645
To add custom color or update token. Please refer tailwind CSS documentation.

Typography

To manage Typography options, update theme in
tailwind.config.js
.
To add or update Font Family. Please refer Tailwind CSS documentation. We have also added a new family, 'roboto', in our
tailwind.config.js
.
To add or update font sizes, please refer to the Tailwind CSS documentation. We have added a new size, '2xs', in
tailwind.config.js
with a value of '10px'.
Text of fontSize (2xs)
To add or update font weights, please refer to the Tailwind CSS documentation. We have added a new weight, 'extrablack', in
tailwind.config.js
with a value of '950'.
Text of fontWeight (extrablack)
To add or update line heights. Please refer Tailwind CSS documentation. To add or update letter spacing. Please refer Tailwind CSS documentation.

Breakpoints

gluestack-ui comes with default Tailwind CSS breakpoints. Please refer this link for customization.

Spacing

gluestack-ui comes with default Tailwind CSS spacing. Please refer this link for customization.

Radius

gluestack-ui comes with default Tailwind CSS border-radius. Please refer this link for customization.

Shadows

gluestack-ui comes with default Tailwind CSS Shadows and we provide two more types of shadows.

Hard Shadows

1
2
3
4
5

Soft Shadows

1
2
3
4

Please refer this link for customization.
Edit this page on GitHub
Go backBenchmarks
Up nextCustomizing Theme
Go backBenchmarks
Up nextCustomizing Theme