Styling Overview

All the components of @gluestack-ui/themed by default are unstyled. Styling is provided by our styling engine @gluestack-style/react by passing config file from @gluestack-ui/config. Config file exports an object which is passed inside the GluetackUIProvider(a Wrapper component that applies the theme to all the children).
import { config } from "@gluestack-ui/config"
import { GluestackUIProvider } from "@gluestack-ui/themed"
function App({ children }) {
return <GluestackUIProvider config={config}>{children}</GluestackUIProvider>
The imported config contains a theme object which contains all the configuration, the structure looks something like the following:
"aliases": {
# Adding bg as alias of background Color
"bg": "backgroundColor"
"tokens": {
# All the tokens are defined here like colors, borderWidths, radii, breakpoints, mediaQueries ....
"globalStyle": {
# All the global style is defined here
"components": {
# All the components style is defined here
"themes": {
# All the themes are defined here
The theme object has aliases, tokens ,global style, components and themes.
  • aliases: This is useful when you want to use a shorter name for a token. For example, you can use bg instead of backgroundColor for the backgroundColor token.
  • tokens: This is where you define your design tokens. Tokens helps us to maintain consistent designs.
  • globalStyle: The styles written inside globalStyle are applied globally in the application.
  • components: This is where you can add component specific styling
  • themes: Here you can create themes for your app with different values for a particular token for more flexibility and reusability of tokens.
Edit this page on GitHub