Looking for documentation on gluestack-ui with NativeWind (alpha) version? Refer to this link.

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 GluestackUIProvider(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
},
"plugins":{
# All the plugins 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.
  • plugins: gluestack-style provides a plugin system to extend the existing functionality of the styled function, making it ideal for adding support for new aliases, tokens, and more.