gluestack/gluestack-ui
Gluestack Ui
gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box.
A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating version lock-in. The library also features built-in enter/exit animations triggered by React lifecycle hooks, a centralized theme system using design tokens with dark mode support, and utility-first styling via Tailwind CSS classes that work consistently across web and mobile. Additional capabilities include server-side rendering with style flushing to prevent layout shift, variant inheritance through component context, and state-responsive styling on native devices.
The component set covers a wide range of UI needs: text inputs, checkboxes, select dropdowns, range sliders, accordions, modal dialogs, bottom sheets, toast notifications, tooltips, progress indicators, avatar groups, and more. A CLI tool initializes projects and adds individual components, while VS Code snippets and an interactive playground speed up development. The library also integrates with Next.js and supports React Server Components partially.
Developers can get started by installing the CLI and running a single command to set up a project, or by exploring all components in a live demo app.
Features
- Copy-Paste UI Frameworks - Distributes UI components as copy-paste source code for full customization without runtime dependencies.
- Cross-Platform Libraries - Provides a library of React components that render on both web and mobile.
- Accessible UI Components - All components are built with built-in keyboard navigation and screen reader support.
- Action Trigger Components - Ships customizable action buttons with loading, icon, link, and full-width variants.
- Component-Based UI Libraries - Provides over 30 pre-built, responsive UI components that work consistently across web and mobile.
- Cross-Platform UI Libraries - Offers over 30 responsive components for cross-platform React UI development.
- React Components - Provides over 30 pre-built, responsive React components for assembling user interfaces.
- Accessible - Delivers React components with built-in WAI-ARIA patterns and keyboard navigation.
- Cross-Platform UI Frameworks - Offers copy-pasteable components that render consistently on web and mobile using Tailwind CSS.
- Tailwind Component Collections - Provides pre-styled UI components designed for Tailwind CSS.
- Tailwind CSS Integration - Applies Tailwind CSS utility classes directly to components for consistent cross-platform styling.
- Design Tokens - Provides a centralized design token system in JSON that controls all colors, spacing, and typography across platforms.
- Design Token Theming - Implements a centralized theme system with design tokens and dark mode.
- Themed Component Libraries - Ships a themed component library with configurable tokens and dark mode.
- Responsive UI Kits - Offers over 30 ready-made components that adapt to any screen size across web and mobile.
- Reusable UI Components - Offers over 30 reusable, cross-platform UI components styled with Tailwind CSS.
- Utility-First CSS - Uses Tailwind CSS utility classes for consistent cross-platform styling.
- Cross-Platform Styling - Applies Tailwind CSS utility classes directly to components for consistent styling across web and native mobile platforms.
- Theme Customization - Defines a central theme configuration with design tokens and dark mode support for consistent styling.
- Cross-Platform UI Frameworks - Builds user interfaces that work consistently across web and mobile from a single codebase.
- Text Input Fields - Creates a customizable text input field with states for disabled, invalid, and read-only.
- SVG Icon Libraries - Renders scalable vector icons using SVG on web and React Native SVG on mobile.
- Server-Side Rendering Style Registries - Flushes inline styles generated during server-side rendering into HTML to ensure correct client-side rendering.
- Accessible Links - Provides accessible link components with keyboard navigation and focus management.
- Accessible Menus - Creates navigational menus with WAI-ARIA compliance, keyboard navigation, and focus management.
- Alerts & Notifications - Shows contextual alert messages with customizable style and action type for system status.
- React Animation Hooks - Ships built-in enter and exit animations triggered by React lifecycle hooks for smooth mount and unmount transitions.
- User Avatars - Renders user avatars with image, initials, or icon fallback and accessible markup.
- Bottom Sheets - Presents a slide-up panel from the bottom of the screen for menus, dialogs, or quick actions.
- Centered Page Containers - Provides a container component that centers content horizontally and vertically for responsive layouts.
- Component Customization Hooks - Applies dynamic hooks and variables to tailor component functionality to project requirements.
- Tooltips - Displays contextual tooltip hints near elements for additional information.
- Basic Text Rendering - Renders text with customizable styles, sizes, and formatting for display in the user interface.
- Component Styling Patterns - Integrates utility-first CSS classes into component styling for consistent appearance across platforms.
- Dark Mode Support - Supports automatic dark mode switching based on system preference or user toggle across all UI components.
- Accordion Panels - Renders collapsible accordion panels with configurable sizes, variants, and full ARIA support.
- Content Cards - Provides a container component that organizes content into visually distinct blocks with variant styles.
- Multi-line Text Inputs - Creates a resizable text area for entering longer blocks of text with configurable states.
- Cross-Platform - Renders images consistently across web and mobile with configurable preset sizes.
- Layout Containers - Provides a foundational box container for building flexible, cross-platform layouts.
- Floating Action Buttons - Ships a customizable floating action button for quick access to primary actions.
- Checkbox Inputs - Creates a native-feeling checkbox for selecting options with keyboard navigation and interactive states.
- Toggle Switches - Renders toggle switches for binary option selection with on/off states.
- Column-Based Responsive Grids - Builds responsive grid layouts with configurable column spans, gaps, and breakpoint adaptation.
- Horizontal Arrangements - Lines up child elements in a horizontal row with configurable spacing and optional reversed order.
- Mounting Animations - Triggers enter and exit animations on components when they mount or unmount using lifecycle hooks.
- Modal Dialogs - Creates accessible modal dialogs for alerts, forms, and notifications on web and mobile.
- Alert Dialogs - Displays a modal dialog for alerts with keyboard interaction and accessibility support.
- Select Inputs - Creates a customizable dropdown selector with accessibility, animations, and form validation integration.
- Single-Select Inputs - Provides a set of mutually exclusive choices with keyboard navigation and accessibility support.
- Notification Badges - Renders small status indicators on UI elements to convey notification counts or labels.
- Popover Overlays - Renders a floating overlay anchored to a trigger element with configurable size and placement.
- Action Sheets - Ships an accessible modal action sheet component with focus trapping and backdrop dismissal.
- Portal Rendering - Renders children outside the parent DOM hierarchy to enable overlays that break out of clipping containers.
- Component Theming - Provides theming tokens and configuration to globally adjust component appearance.
- Range Sliders - Creates a range input that users can drag to select a value with keyboard navigation support.
- Responsive Breakpoints - Returns different style values based on screen width breakpoints for responsive layout adaptation.
- Responsive Layout Engines - Components are responsive and adapt to different screen sizes.
- Select Dropdowns - Renders a customizable single-option dropdown menu with variants, sizes, and custom triggers.
- Slider Components - Delivers a customizable slider input with configurable size, orientation, and disabled state.
- State-Responsive Native Styles - Wraps components with a higher-order component that dynamically adjusts styles based on user interaction states on mobile.
- Contextual Style Scoping - Provides a mechanism to scope style definitions to component subtrees using React context.
- Tabular Data Components - Renders structured data in rows and columns with customizable styling for clear information presentation.
- Vertical Layouts - Arranges child components in a vertical column with adjustable spacing for consistent layout.
- Animation Transition Components - Provides components with built-in enter/exit animations and smooth transitions.
- Loading Placeholders - Shows temporary placeholder shapes that mimic content layout while data is being fetched.
- User Avatars - Renders user avatars with image, icon, or text fallback and support for grouping.
- Avatar Groups - Renders avatar groups with overlapping images and optional badge overlays.
- User Interaction Handling - Manages hover, pressed, and focus states on touchable elements for immediate visual feedback.
- Next.js - Configures components to integrate seamlessly with Next.js server-side rendering and static generation.
- Form Field State Management - Wraps individual form fields to handle validation, required, disabled, and readonly states.
- Heading Styles - Displays styled heading text with customizable sizes for consistent typography across platforms.
