Gluestack UI — Universal React and React Native Component Library

Introduction

Gluestack UI is a universal component library that targets both React web and React Native from a single set of components. It uses a copy-paste distribution model similar to shadcn/ui, where components are added directly to your project for full customization. Styling is handled through Tailwind CSS on web and NativeWind on native platforms.

What Gluestack UI Does

• Provides 30+ accessible UI components that work on web, iOS, and Android
• Uses a copy-paste model where component source code lives in your project
• Supports Tailwind CSS class-based styling with NativeWind for React Native
• Includes dark mode, responsive breakpoints, and theming out of the box
• Ships with keyboard navigation and ARIA attributes for accessibility compliance

Architecture Overview

Gluestack UI components are built on top of React Native's core primitives and React Native Web for browser rendering. Each component is a self-contained file that imports from a shared styling layer. The CLI copies component source files into your project directory, giving you ownership of the code. Styling uses NativeWind (Tailwind CSS for React Native), which compiles utility classes into native StyleSheet objects on mobile and standard CSS on web.

Self-Hosting & Configuration

• Run the init command to set up the component directory and configure paths
• Add individual components with npx gluestack-ui add button accordion etc.
• Customize the tailwind.config.js to define your color palette and spacing scale
• Override component variants by editing the copied source files directly
• Configure the provider component for global theme settings and color mode

Key Features

• True cross-platform rendering from a single component API on web and native
• Copy-paste ownership model with no runtime library dependency
• Tailwind CSS and NativeWind styling for consistent utility-class workflow
• WAI-ARIA compliant with keyboard and screen reader support
• Responsive design support with breakpoint-based utility classes

Comparison with Similar Tools

• shadcn/ui — web-only copy-paste components; Gluestack UI adds React Native support
• React Native Paper — Material Design components for React Native only; Gluestack UI works on web too
• Tamagui — universal components with a custom styling engine; Gluestack UI uses Tailwind/NativeWind
• Chakra UI — runtime CSS-in-JS for React web; Gluestack UI compiles to native styles and standard CSS

FAQ

Q: Do I need React Native to use Gluestack UI on the web? A: No. The web components use React Native Web under the hood, but you install them via the CLI without a full React Native setup.

Q: Can I use it with Expo? A: Yes. Gluestack UI works with Expo projects using NativeWind for styling.

Q: How is this different from a package dependency? A: Components are copied into your project. You own the source code and can modify it freely without waiting for library updates.

Q: Does it support server-side rendering? A: Yes. The web components are SSR-compatible with frameworks like Next.js.

Sources

• https://github.com/gluestack/gluestack-ui
• https://gluestack.io/