Default Tokens
gluestack-ui v2 ships with default tokens that provide access to theme values and lets you build and customize your own themed components.
Colors
Typography
Breakpoints
Spacing
Radius
Shadows
Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.
Theming in @gluestack-ui v2 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#b3b3b3
50#999999
100#808080
200#737373
300#666666
400#525252
500#333333
600#292929
700#1f1f1f
800#0d0d0d
900#0a0a0a
950#080808
secondary
0#feffff
50#f1f2f2
100#e7e8e8
200#dbdbdb
300#afb0b0
400#727373
500#5e5f5f
600#515252
700#3f4040
800#272626
900#181717
950#0b0c0c
tertiary
50#fff2e5
100#ffe9d5
200#fed1aa
300#fdb474
400#fb9d4b
500#e78128
600#d7751f
700#b4621a
800#824917
900#6c3d13
950#543112
error
0#fee9e9
50#fee2e2
100#fecaca
200#fca5a5
300#f87171
400#ef4444
500#e63535
600#dc2626
700#b91c1c
800#991b1b
900#7f1d1d
950#531313
success
0#e4fff4
50#caffe8
100#a2f1c0
200#84d3a2
300#66b584
400#489766
500#348352
600#2a7948
700#206f3e
800#166534
900#14532d
950#1b3224
warning
0#fffdfb
50#fff9f5
100#ffe7d5
200#fecdaa
300#fdad74
400#fb954b
500#e77828
600#d76c1f
700#b45a1a
800#824417
900#6c3813
950#542d12
info
0#ecf8fe
50#c7ebfc
100#a2ddfa
200#7ccff8
300#57c2f6
400#32b4f4
500#0da6f2
600#0b8dcd
700#0973a8
800#075a83
900#05405d
950#032638
typography
0#fefeff
50#f5f5f5
100#e5e5e5
200#dbdbdc
300#d4d4d4
400#a3a3a3
500#8c8c8c
600#737373
700#525252
800#404040
900#262627
950#171717
white#FFFFFF
gray#D4D4D4
black#181718
outline
0#fdfefe
50#f3f3f3
100#e6e6e6
200#dddcdb
300#d3d3d3
400#a5a3a3
500#8c8d8d
600#737474
700#535252
800#414141
900#272624
950#1a1717
background
0#ffffff
50#f6f6f6
100#f2f1f1
200#dcdbdb
300#d5d4d4
400#a2a3a3
500#8e8e8e
600#747474
700#535252
800#414040
900#272625
950#181718
error#fef1f1
warning#fff4eb
muted#f7f8f7
success#edfcf2
info#ebf8fe
light#FBFBFB
dark#181719
indicator
primary#373737
info#5399ec
error#b91c1c
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.