gluestack-ui logopreview
Docs
Blog
Get Updates
Prompt to React Native
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
AppLighter
MCP Server
MCP Server
Guides
Recipes
LinearGradient
Tutorials
Building Ecommerce App
More
Upgrade to v2Upgrade to v3Upgrade to v4FAQsReleasesChangelogRoadmapTroubleshootingDiscord FAQs

Default Tokens

gluestack-ui v4 ships with shadcn-inspired 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 is based on the
Styled System Theme Specification
and follows the
shadcn/ui
design principles.

Colors

gluestack-ui v4 uses a semantic color token system inspired by shadcn/ui. Instead of using numerical color scales (50-900), we use purpose-driven color names that adapt automatically to light and dark modes.

Semantic Color Tokens

The color system is organized around semantic tokens that describe their purpose rather than their appearance:

Base Colors

  • background
    - Default page background
  • foreground
    - Default text color

Component Colors

  • card
    - Card backgrounds
  • popover
    - Popover/dropdown backgrounds
  • popover-foreground
    - Text color for popovers

Semantic Colors with Foregrounds

Each semantic color has a corresponding
-foreground
token for optimal contrast:
  • primary
    /
    primary-foreground
    - Primary actions and highlights
  • secondary
    /
    secondary-foreground
    - Secondary actions
  • accent
    /
    accent-foreground
    - Accent elements
  • muted
    /
    muted-foreground
    - Muted/subtle content
  • destructive
    - Destructive actions (errors, delete buttons)

Form & Border Colors

  • border
    - Default border color
  • input
    - Input field borders
  • ring
    - Focus ring color

Color Palette

Below are the default color tokens provided in gluestack-ui v4. These automatically adapt between light and dark modes:
foreground
DEFAULT#0a0a0a
card
default#ffffff
foregroundrgb(var(--card-foreground) / <alpha-value>)
popover
default#ffffff
foreground#0a0a0a
muted
default#f5f5f5
foreground#737373
destructive
default#e7000b
border
DEFAULT#e5e5e5
input
DEFAULT#e5e5e5
ring
DEFAULT#d4d4d4
primary
default#171717
foreground#fafafa
secondary
default#f5f5f5
foreground#171717
background
default#ffffff
accent
default#f7f7f7
foreground#343434

How It Works

The color tokens use RGB values without the
rgb()
wrapper
, allowing for opacity modifications using Tailwind's opacity syntax:
// In config.ts
export const config = {
  light: vars({
    '--primary': '23 23 23',           // Almost black in light mode
    '--primary-foreground': '250 250 250', // Almost white text
  }),
  dark: vars({
    '--primary': '255 245 245',        // Almost white in dark mode
    '--primary-foreground': '23 23 23',    // Almost black text
  }),
};
Usage with opacity:
// Full opacity
<Box className="bg-primary" />

// 50% opacity
<Box className="bg-primary/50" />

Benefits of This System

  1. Step 1:Semantic naming - Colors describe their purpose, not their shade
  2. Step 2:Automatic dark mode - Tokens adapt to light/dark mode automatically
  3. Step 3:Guaranteed contrast - Foreground tokens ensure readable text
  4. Step 4:Design system consistency - Follows industry-standard patterns
To customize colors, update
gluestack-ui-provider/config.ts
and
tailwind.config.js
. For detailed instructions, see
Customizing Theme
.

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