DEV Community

Cover image for gluestack-ui v2 is here!
gluestackio
gluestackio

Posted on • Originally published at gluestack.io

gluestack-ui v2 is here!

Copy-paste components & patterns crafted with Tailwind CSS (NativeWind)
gluestack-ui v2 is here and it's better than ever!

We've made gluestack-ui v2 as flexible and customizable as possible. But what truly sets gluestack-ui v2 apart is its universal compatibility. You just write once and run anywhere.

Plus, it's built with NativeWind, providing a powerful styling solution with Tailwind CSS classes support, and all you have to do is copy-paste. And let's not forget one of the most beloved features—dark mode all the way through!

Image description

What’s Freshly Brewed?

Modular Architecture: Selective component usage

gluestack-ui v2 introduces a modular architecture, allowing developers to choose and integrate only the necessary components into their projects. This approach reduces bundle sizes, improves performance, and simplifies maintenance by eliminating unused code.

Image description

NativeWind Integration: Tailwind CSS support

Leveraging NativeWind as its styling engine, gluestack-ui v2 provides seamless integration with Tailwind CSS classes. Developers can customize UI components effortlessly, ensuring consistent design across different platforms like Expo and Next.js.

Learn More

Component Redesign: Enhanced visual design

gluestack-ui v2 includes redesigned components with improved visual aesthetics and usability. From buttons and forms to navigation elements and data displays, each component has been refined to enhance user experience and align with modern design trends.

Learn More

Enhanced Performance: React Server Components (RSC) compatibility

gluestack-ui v2 supports React Server Components (RSC), enabling server-side rendering of UI elements. This optimizes initial load times, and improves the overall user experience by reducing client-side JavaScript execution.

Learn more

Easy Onboarding: Installs in a flash

gluestack-ui v2 offers a CLI tool for seamless onboarding. Quickly initialize projects, install dependencies, and configure settings with intuitive commands, streamlining the setup process and enabling developers to get started faster.

Learn More

Are you migrating from v1?
Check out our Migration guide

Non-Bundled Library Approach: Reduced dependency footprint

gluestack-ui v2 is designed as a non-bundled library, allowing developers to directly copy-paste required components into their projects. This approach minimizes unnecessary dependencies and ensures optimal performance and code efficiency.

Learn More

No Default Primary Color: Design customization

The default primary color in gluestack-ui v2 has been updated to gray, promoting a neutral design aesthetic by default. Existing users can easily configure and adapt this change to align with their specific design preferences and branding.

Learn More

VS Code Extension: IDE integration

Enhance your development workflow with the gluestack-ui v2 VSCode extension. Access component snippets, quick documentation references, and styling suggestions directly within your coding environment for seamless integration.

Learn More

Figma UI Kit: Design System integration

Simplify UI design and collaboration with the gluestack-ui v2 Figma UI Kit. Explore pre-designed components, layouts, and styles that perfectly align with gluestack-ui v2’s focus on universal design, accessibility, and customization.

Learn More

Image description

Starter Kits: Accelerated development

Jumpstart your projects with gluestack-ui v2 Starter Kits. Choose from a variety of pre-configured templates for web and mobile applications, complete with optimized configurations and sample code to accelerate development.

Learn More

Universal to the Core: Universal UI design

gluestack-ui v2 adheres to universal design principles, ensuring accessibility across different devices and platforms. Develop applications that everyone uses, regardless of their abilities or experience with assistive technologies.

Learn More

Accessibility Baked In: Inclusive UI design

gluestack-ui v2 components are designed to be fully operable and navigable, ensuring a smooth and intuitive user experience. Experience better keyboard interaction, gestures, screen readers, and the right color contrast!

Learn More

Create Design Systems/Component Library: Make it your own

Craft a unique design ecosystem with a collection of components that align perfectly with your creative vision.

Image description

Our Journey: We are getting better every day

The road to v2 has been exciting; we have much more coming up! Stay tuned for a sneak peek into the future of gluestack-ui.

Join Our Community: Be a part of this journey

We are constantly pushing new upgrades for gluestack-ui and welcome any query from our community. Join our socials to stay updated and receive support related to gluestack-ui.

Links:

Top comments (0)