---
title: Introduction | gluestack-style
description: gluestack-style is a performant styling library for React & React Native that enables developers to write maintainable and scalable styles in a fast and efficient manner.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="Overview/Introduction" />

# Introduction

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](https://gluestack.io/style) - The high-performing and universal styling library.
- [gluestack-ui](https://gluestack.io/ui/docs/overview/introduction) - 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.

## Goals

- 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](https://stitches.dev), [tamagui](https://tamagui.dev) & [dripsy](https://www.dripsy.xyz).
