Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.
Introduction
Customizable components and patterns for React, Next.js & React Native.
gluestack-ui v2 offers customizable, beautifully designed components for your projects. Unlike traditional libraries, it's not a pre-packaged dependency. Choose the components you need and copy-paste them directly into your React, Next.js & React Native projects.
Why gluestack-ui v2?
Motivation for v2
gluestack-ui v2 is a major upgrade designed to meet the needs of modern developers by enhancing performance, improving the developer experience, and offering greater flexibility. Here's why we're excited to release v2:
- 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 get up to speed quickly and 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: gluestack-ui v2 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 unparalleled customization.
- Maximum Customization: Gain complete control over your design with easy-to-integrate and customizable components, patterns, and screens.
- No Default Primary Color: Start with a non-opinionated design, as gluestack-ui v2 uses a default primary gray color that can be easily adjusted to fit your preferences.
Key Features of gluestack-ui v2
- Consistency: gluestack-ui provides a consistent design language across different platforms, making it easier to build interfaces that look and feel the same on all devices.
- Accessibility: gluestack-ui v2 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.
- Ease of Use: gluestack-ui v2 components are designed to be easily customizable. They have clear and concise APIs that make integration into existing projects simple.
- Predefined Patterns: Benefit from a variety of predefined patterns that ensure design consistency and streamline development.
- Theming Tokens: gluestack-ui takes a config file in the GluestackUIProvider, which contains theme tokens, aliases, component themes, etc., to help with the project requirements. You can install and import the config as a module. See more about theming.
Why use gluestack-ui v2, when we already have NativeBase?
gluestack-ui was originally part of NativeBase, but it has since evolved into a standalone library with significantly 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 a more cohesive, robust and consistent interface for developers.
Why use gluestack-ui v2, when we already have gluestack-ui v1?
gluestack-ui v2 is a major upgrade from v1, designed to address the evolving needs of modern developers. With enhanced performance, improved developer experience, and greater flexibility, gluestack-ui v2 offers several advantages over its predecessor:
- Modular Approach: Avoid unnecessary bloat by selecting and using only the components you need.
- Simple Integration: Easily integrate components by copying and pasting code snippets directly into your project files.
- Tailwind Class Support: Enjoy seamless styling with Tailwind's intuitive utility classes with NativeWind.
- RSC compatible components: Optimize your applications with components that enhance performance by leveraging React Server Components.
- Full Customization: Tailor components to fit your project's needs by adjusting styles and behaviors.
What will happen to existing gluestack-ui v1 users?
Existing gluestack-ui v1 users will continue to have access to their current version, but we highly encourage upgrading to gluestack-ui v2 to take advantage of the new features and improvements. Here's what you can expect:
- Continued Support: We will provide maintenance and support for gluestack-ui v1 for a limited time to ensure a smooth transition.
- Migration Guide: We have prepared a comprehensive migration guide to help you seamlessly transition from v1 to v2. The guide includes detailed instructions, code examples, and best practices to ease the process. Link to migration guide.
- Enhanced Features: By upgrading to v2, you will benefit from improved performance, better developer experience, and more customization options.
- Community and Documentation: Extensive documentation and an active community will support you through the upgrade process and beyond.
- Codemod Tool: Additionally, we've developed a codemod tool to assist with the transition, streamlining the process and reducing manual effort. You can find instructions on how to install the codemod tool in our documentation here.
We are committed to making the transition to gluestack-ui v2 as smooth and beneficial as possible for all our users.
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 grid. Apart from that, we are actively working on improving the performance of the styling library using techniques such as bundler-plugins, tree flattening, and more.
Community
Discord
Get involved with the community, ask questions, and share tips, join our Discord.
To receive updates on new primitives, announcements, blog posts, and tips on using the library.
GitHub
To report bugs, request features, or contribute to the library, check out the gluestack-ui GitHub repository.
Stackoverflow
Receive firsthand assistance from our community of developers.
Stay updated about our company and collaborate on enterprise-level projects.
All Components
Explore 30+ components for React, Next.js & React Native See All.