Library of React and React Native components and patterns. Provides various UI elements for easy integration into projects.
Features
React Native Components
Provides a collection of React and React Native components that can be easily used and customized in development projects.
Customizability
Allows users to customize the components to fit their design and functional needs through an intuitive interface.
Patterns for Development
Offers predefined patterns to help developers implement common features quickly and efficiently.
Performance Optimization
gluestack-ui v2 is lightweight and efficient, ensuring fast load times and smooth performance across all devices.
Enhanced Developer Experience
Simplified and intuitive API with comprehensive documentation to reduce learning curve, allowing developers to quickly build exceptional user interfaces.
Moving Away from Bundled Libraries
Avoids unnecessary bloat by selecting only the components you need, copying content directly from the documentation.
No Extra Dependencies
Minimizes additional dependencies, making projects leaner and easier to maintain.
RSC Compatible Components
Optimizes applications with React Server Components, reducing client-side JavaScript and improving performance.
ClassName Support
Utilizes Tailwind's className utility classes with NativeWind's robust styling engine for unparalleled customization.
Maximum Customization
Provides complete control over design with easy-to-integrate and customizable components, patterns, and screens.
No Default Primary Color
Starts with a non-opinionated design, using a default primary gray color that can be easily adjusted to preferences.
Performance Optimization
gluestack-ui v2 is lightweight and efficient, ensuring fast load times and smooth performance across all devices.
Enhanced Developer Experience
The simplified, intuitive API and comprehensive documentation reduce the learning curve, allowing developers to build exceptional user interfaces.
Moving Away from Bundled Libraries
Avoid unnecessary bloat by selecting only the components you need and copying content directly from the documentation.
No Extra Dependencies
Minimizes additional dependencies, making your projects leaner and easier to maintain.
RSC Compatible Components
Optimize your applications with React Server Components, reducing client-side JavaScript and improving performance.
ClassName Support
Utilize Tailwind's intuitive className utility classes with NativeWind's robust styling engine for customization.
Maximum Customization
Gain complete control over your design with customizable components, patterns, and screens.
No Default Primary Color
Start with a neutral design, using a default gray color easily adjusted to fit preferences.
CLI Installation
Guide to installing gluestack-ui using the command-line interface (CLI).
Prerequisites Check
Lists the necessary versions of packages like next, react-native, expo, and node for using the gluestack-ui CLI.
Project Setup
Instructions for setting up a new project using Next.js or Expo.
Initialization
Details on how to initialize your project with GluestackUIProvider and the configuration file using the init command.
React Native Development
The service focuses on building React Native apps quickly using AI, leveraging the legacy of NativeBase and the modern approach of gluestack-ui.
Actionsheet
A slide-up panel that hosts actions related to the current context, like a menu.
AlertDialog
A modal dialog that interrupts the user with important details or actions.
Alert
An element to display important messages to the user, such as warnings or errors.
Avatar
A graphical representation of a user or entity, often used for user profiles.
Accordion
A vertically stacked list of items that can be individually expanded to reveal more content.
Badge
A small indicator added to another element to signify a status, such as 'new' or 'unread'.
Box
A versatile container component used for layout control.
Button
A clickable button element used to trigger actions.
Center
A layout utility to center child content.
Checkbox
A control element that allows users to make a binary choice, typically a yes/no decision.
Divider
A line used to visually separate content sections.
Fab
A floating action button used for a primary action in an app.
Responsive Value Hook
The 'useBreakpointValue' hook returns the value for the current breakpoint based on a provided responsive values object. It allows developers to define different values for different breakpoints, enabling responsive design patterns in applications.
LinearGradient Component
A reusable graphical element to create linear gradients as backgrounds or styling within UI elements. It creates a smooth transition between two or more colors along a straight line.
Quick Start Command
Allows users to quickly set up the Gluestack UI by running the command 'npm create gluestack'.
VS Code Extension
Provides a Visual Studio Code extension to enhance development with Gluestack UI.
Figma UI Kit
Offers a Figma UI kit for design purposes, letting users design with Gluestack components in Figma.
Manual Installation
Instructions for manual installation of Gluestack UI with support for Next.js, Expo, and React Native.
Head Starter Kit
Starter kits available for different platforms like Next.js, Expo, and Universal to kickstart development.
Component Exploration
Explore over 30 responsive components designed for various screens and styles.
IntelliSense setup (optional)
If you are using VSCode and the Tailwind CSS IntelliSense Extension, you need to add specific settings to your settings.json file. This helps in recognizing custom classes.
Prettier plugin setup (optional)
If you are using prettier-plugin-tailwindcss, you can sort your class names by adding 'tva' to the list of functions to sort in the .prettierrc file.
Component Snippets
Insert gluestack-ui components into your code with shorthand snippets. Each snippet starts with the prefix 'gs_' followed by the name of the desired component, allowing you to quickly generate component code without manual typing.
Additional Recipes
Collection of predefined code templates, known as 'recipes,' cover a wide range of scenarios, saving time by providing ready-to-use code structures.
Color Tokens
Color tokens in Figma provide a systematic way to manage and use colors in design projects. They help maintain consistency and simplify updates by defining a centralized set of color values, making them reusable throughout the project. Includes an extended color palette added as styles, semantic colors as variable collections, and a set of fixed colors for consistency across modes.
Text Tokens
Text tokens in Figma allow you to define and manage text properties like font, size, line spacing, and color. Includes two main components, Text and Heading, with various sizes and font weights, which can be customized to align with your brand.
Init Command
The init command sets up your project by adding the necessary gluestack-ui.config.json file, including the GluestackUIProvider, installing dependencies, and configuring files such as metro.config.js, babel.config.js, next.config.js, tailwind.config.js, global.css, ts.config.json, and the entry file for your project.
tva (Tailwind Variant Authority)
The tva function serves as a wrapper around Tailwind Variant, extending its functionality. It introduces support for parentVariant and parentCompoundVariant in addition to the default Tailwind variant.
VariantProps Utility
The VariantProps utility allows for easy extraction of variants from a component.
flush
This function facilitates server-side rendering (SSR) by flushing out any styles generated during the process, ensuring they are properly added to the HTML document.
withStates
withStates is a Higher Order Component (HOC) designed to incorporate state-based styling into gluestack-ui components on native devices.
withStyleContext
withStyleContext is a HOC that creates a React context with a defined scope.
withStyleContextAndStates
This single HOC combines the functionality of both withStyleContext and withStates.
useStyleContext
useStyleContext is a hook used to consume the context created by withStyleContext and withStyleContextAndStates.
WAI-ARIA Guidelines
gluestack-ui follows the WAI-ARIA Authoring Practices guidelines to ensure components are accessible for assistive technology users, providing guidance on creating accessible widgets, navigation, and behaviors using WAI-ARIA roles, states, and properties.
Browser and Assistive Technology Testing
Components are tested with modern browsers and widely used assistive technologies like NVDA and JAWS to ensure accessibility, including support for keyboard navigation.
Accessible Component Props
Built-in accessibility features include keyboard navigation and screen reader support. Additional accessibility props such as aria-label, aria-labelledby, aria-describedby, role, tabindex are also provided.
Keyboard Accessibility
All components can be navigated and operated using a keyboard, ensuring optimal user experience for those who cannot or prefer not to use a mouse or touch screen.
Focus Management
Focus management ensures a smooth experience for keyboard users by visually highlighting components when they gain focus and maintaining a focus order consistent with the DOM order.
Screen Reader Accessibility
Provides support for screen readers to ensure all components are accessible for those relying on auditory feedback.