Customizable Components for React, Next.js & React Native with Optional Styling.
gluestack-ui is a universal UI library that provides optionally styled and accessible components. These components are designed for easy integration into applications developed with React and React Native.
Why we built gluestack-ui?
gluestack-ui 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 here we created separate package for each of them to incrementally adopt those and add them directly to your project using CLI.
We alse broke down the library into two separate libraries for two different responsibilities.
style.gluestack.io - The high-performing and universal CSS-in-JS library.
ui.gluestack.io - 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.
Features
Accessibility: gluestack-ui aims to provide a set of accessible components that work across different platforms and devices. The components have accessibility features such as ARIA attributes, keyboard navigation, and focus management.
Consistency: gluestack-ui provides a consistent design language across different platforms, making it easier to build interfaces that look and feel the same on other devices.
Ease of use: The gluestack-ui components are designed to be easily customizable. They have clear and concise APIs that make integration into existing projects simple.
Optional styling: gluestack-ui copies the components to your project to easily customize or change the look and feel of the components.
Theming tokens: gluestack-ui takes a theme token json in the Gluestack provider to help with the project requirements.
But aren’t React Native and React Native Web sufficient?
gluestack-ui and React Native Web aren’t directly comparable as they are different.
While React Native and React Native Web can be used to create cross-platform applications, they require developers to write platform-specific code and customize their components for accessibility and performance. gluestack-ui provides a different approach by offering a set of universal, styled, and accessible components that work seamlessly on both web and mobile platforms.
By using gluestack-ui, developers can create accessible and user-friendly interfaces with a consistent design language without worrying about the underlying platform. The focus on accessibility and performance means that developers can achieve a high level of usability with minimal effort.
React Native Web is great! gluestack-ui needs React Native Web’s “components” to build universal components.
gluestack-ui builds upon the React Native Web components by adding accessibility props, focus management, and other functionality to ensure that the components are accessible and performant. But, gluestack-style doesn’t use React Native Web’s styling engine (which is highly performant)! gluestack-ui'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-ui, when we already have NativeBase?
gluestack-ui was originally part of NativeBase but it has since evolved into a standalone library with much-improved performance. It prioritizes performance and is optimized for even complex applications with many elements.
We have also shifted from prop based APIs in NativeBase to compound APIs because that provides more cohesive, robust and consistent interface for developers.
Future Considerations
gluestack-ui is committed to continuously expanding its library of components to meet the needs of developers. We plan to add more components to the library, such as navigation, combo box, and accordion.
Community
Discord
To get involved with the gluestack-ui community, ask questions, and share tips, join our Discord.