gluestack-style is a high-performing styling library for React and React Native that allows developers to create scalable and maintainable styles quickly and effectively.

Why we built gluestack-style?

gluestack-style is different from other styling libraries like Glamour, Emotion, Styled-components, and Vanilla-extract because it focuses on React Native while still being universal and high-performing on the web. Unlike other libraries, gluestack-style's styles are calculated during compile-time using a babel-plugin, which reduces the amount of processing needed during runtime. This means that with Server-Side Rendering (SSR) and Static Site Generation (SSG), pages created with gluestack-style can even run without JavaScript on the client, including media queries.
gluestack-style originally started as part of NativeBase, a universal component library for both React and React Native. However, we realized that not everyone needs all the components from NativeBase, so we broke it down into two separate libraries:
  • gluestack-style - The high-performing and universal styling library.
  • gluestack-ui - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired.

But aren’t React Native and React Native Web sufficient?

gluestack-style and React Native Web aren’t directly comparable, as they serve different purposes.
React Native Web has two parts
  • A set of low-level components
  • A styling library to style those components
Whereas gluestack-style is a styling library
  • A styling library to style any given React / React Native component
  • A comprehensive theming solution that enables you to easily customize the look and feel of your application
  • Each component built with gluestack-style can be styled with
    • Tokens
    • Variants
    • Media Queries
    • States (hover, focus, etc)
    • Platform
    • Color Mode
React Native Web is great! gluestack-style needs React Native Web’s “components” to build universal components.
But, gluestack-style doesn’t use React Native Web’s styling engine (which is highly performant)! gluestack-style’s babel-plugin (compiler) precompiles the declarative styling object into CSS classes and declarations and injects them directly during compile-time leading to zero style calculation during the runtime.

Why Use gluestack-style, When We Already Have NativeBase?

gluestack-style was originally part of NativeBase, but it has since evolved into a standalone library focused solely on styling. Unlike NativeBase, which is a complete component library that includes styling, accessibility, and a default theme, gluestack-style specifically targets styling.
While NativeBase provides a comprehensive solution for building web and mobile applications, gluestack-style offers a more streamlined and flexible solution for managing styles in your projects. This makes gluestack-style a complementary tool for developers who are already using NativeBase, or for those who want to focus specifically on styling without the added complexity of a full component library.


  • Universal styling solution (implementation per platform can differ)
  • Consistent API for developers
  • Solve CSS Specificity
  • TypeScript everything
  • Styling for
    • Theme / token
    • Variants
    • Media Queries
    • States
    • Platform based styling
    • Color Mode
  • Composable (should work with other libraries)

Non goals

  • Don’t solve problems beyond styling!
  • Accessibility (check gluestack-ui)
  • Design (check gluestack-ui again!)
  • Animation (check examples with Legend-Motion)

Future Considerations:

  • Compatibility with other libraries and frameworks, including:
    • Solid
    • Svelte
    • Vue
    • Astro
    • Qwik
  • Bundler plugin instead of the current babel-plugin, which would allow for:
    • Generation of separate CSS files
    • Removal of intermediate components where appropriate
    Please note that these features are not part of the current roadmap, but are being actively considered for future development.

Notes to Keep in Mind:

Although this information is internal to the library, it’s helpful to know the following
  • gluestack-style generates CSS styles for media queries using pure CSS.
  • Currently, media-query color-mode preferences are not supported.
  • gluestack-style creates CSS classes and declarations, but does not utilize CSS pseudo-selectors (e.g. :hover) for user interactions. This allows developers to have more control over user interactions and handle them with logic as needed.
  • CSS class declarations generated by gluestack-style follow a specific "order of specificity", including:
    • Variants
    • States (e.g. hover, focus)
    • Color mode
This project is inspired by stitches, tamagui & dripsy.