gluestack-ui

gluestack-ui is a universal component system for React, React Native, Next.js, and Expo, styled with Tailwind CSS via NativeWind. Rather than installing a component library as an opaque dependency, its CLI copies component source directly into your project — the same shadcn-style model — so you own and can modify the code, get full TypeScript types, and avoid version-lock on a third-party package.

The monorepo hosts dozens of individual @gluestack-ui/* primitive packages (button, input, overlay, toast, form-control, icon, and more) that the CLI composes into ready-to-use, accessible components spanning web and native platforms from one codebase.

What You Get

• A CLI (init, add, upgrade) that scaffolds and copies component source into Next.js, Expo, or React Native projects
• Universal components that render consistently across web, iOS, and Android from a single codebase
• NativeWind/Tailwind-based styling so components integrate with existing Tailwind design tokens
• Accessibility-first primitives (focus management, ARIA roles, keyboard navigation) built on top of Radix-inspired headless patterns
• Dozens of composable @gluestack-ui/* packages (button, form-control, icon, input, overlay, toast, etc.) usable individually or via the CLI

Common Use Cases

• Bootstrapping a cross-platform design system that shares component code between a Next.js web app and an Expo mobile app
• Adding accessible, pre-styled components (buttons, forms, modals, toasts) to a project without pulling in a black-box UI library
• Customizing component internals directly since the CLI copies source into your repo instead of hiding it in node_modules
• Building React Native apps that need Tailwind-consistent styling shared with a companion web codebase

Under The Hood

Architecture: The gluestack-ui monorepo hosts the CLI package (packages/gluestack-ui) alongside dozens of individual primitive packages under packages/@gluestack-ui/* (button, input, overlay, toast, etc.); the CLI’s src/commands/{init,add,upgrade}.ts scaffold NativeWind/Tailwind config into a target Next.js/Expo/React Native project and then copy selected component source from a component registry, while src/util/config/* handles framework-specific setup differences. Tech Stack: TypeScript throughout, built on React and React Native with NativeWind (Tailwind CSS for React Native) for styling, Yarn workspaces for monorepo management, and Jest configured for unit tests. Code Quality: The CLI package includes a __tests__ directory and jest.config.js, though as a copy-paste distribution model most component-level correctness is validated in the example apps/ rather than exhaustive CLI unit tests; the project sees very active, frequent commits and releases. API Design: The npx gluestack-ui init / add <component> workflow mirrors the now-familiar shadcn CLI pattern, minimizing setup friction, though the copy-paste model means upgrades require the CLI’s upgrade command to reconcile local edits rather than a simple version bump.