The gluestack-ui v2 is here! 🎉
🌬️ Uses NativeWind / Tailwind
📋 Copy-paste components for Next & Expo
🎨 All new design
🚀 Performance
⚛️ RSC support
🖌️ Figma Kit with variables, dark-mode and variants
🔁 Migration to v2 with a codemod
Looking for shadcn/ui for React Native? Well, we heard you. Introducing NativeWind(V4) + gluestack-ui (Experimental).
Copy and paste accessible and customizable components into your apps.
We're planning to publish gluestack-ui v2, with NativeWind as the default styling engine.
This features
- Copy-paste components source code into your apps.
- ClassName support for React Native & Web.
- Universal, Accessible and fully customizable.
- Not a bundle library.
Excited to inform you that we’ve been working on a full-stack framework —
It's 100% open-source & reduces the complexities of building modern web & mobile apps.
Sign up for early access:
Let us know what you think!
#BuildWithGlue
👑 gluestack wins React Open Source Awards 2024 🎉
We could not have done this without you — our awesome community that have used gluestack and built awesome ideas with it!
New docs update for gluestack-ui+NativeWind
Check out all the components demo that supports NativeWind and copy-pasteable patterns in one place.
Link in thread. 🧵
(1/2)
Hi fam! gluestack will be participating in
@react_native_eu
2023 🎉
We look forward to the talks and meeting the awesome community that makes React Native great.
Be sure to catch us at our booth. We have something for everyone.
Wrocław, here we come ✈️
@sanketsahu
@geekyants
Effortlessly create universal apps with unified code across
@nextjs
and
@expo
projects. 🚀
You can boost productivity, maintain code consistency, and make maintenance easier for web and mobile platforms.
Here is a snippet of what you can create with gluestack v2. 🎨
The
#StateOfReactNative
results are out.
We have ranked quite prominently considering we launched only a few months back.
69% of users express a willingness to use gluestack-ui again, with an 8% current usage.
Also, 52% are interested in using gluestack-ui.
We're shaking things up by moving towards copy-pastable components in React & React Native.
No more constraints of a component library!
Our CLI tool streamlines the process: simply use npx gluestack-ui init to initialize gluestack-ui in your Next.js and Expo projects.
gluestack-ui comes with an auto-generated Figma UI Kit 👉
You get —
‣ 24 distinct components
‣ A staggering 2400 variants
‣ A rich palette of 4312 colour tokens
‣ 216 versatile text tokens
‣ 8 shadow tokens to enhance your designs
‣ Dark mode
Our websites are getting a facelift with gluestack-ui + NativeWind!
We have achieved significant performance boost with Next.js app router and server components. Plus, className support makes customizing gluestack-ui components smoother than ever.
We've updated our showcase app to use NativeWind while still leveraging our universal components. Same look, same functionality, now with added ease of use for tailwind lovers!
Introducing gluestack Figma Kit Series, where we share the best hacks to use the kit for projects.
In the first episode, we give an overview of
— The gluestack Figma kit environment
— Foundational tokens, color palette, shadows, and typography
Get started 🔗
gluestack recommends stacks that we feel are best for creating applications when you
#BuildWithGlue
. The image shows how they work together.
⭐️ However, note that these are just our opinions. gluestack is configurable and allows custom plugins to solve specific use cases.
📢 Hi fam, NativeBase → gluestack-ui migration is here!
- The Notion guide is here: (WIP, 30% done)
- For in-depth information on installation, refer gluestack-ui docs:
PS: Please feel free to reach out in case of issues 🙌
Weekly update — Component updates & release 🎉!
◆ Fixed aria-label issues in checkbox & radio components, and released new versions.
◆ Resolved control issues and released fixes for the Select component.
◆ Initial setup and documentation for Unitools & Bottomsheet.
🧵(1/4)
Our showcase app just leveled up with
@NativeWind
in
@expo
v51, while still using our universal components.
It has the same amazing features and stunning look, but much easier to style now. See for yourself!
gluestack-ui components come with out-of-the-box accessibility —
‣ WAI-ARIA Compliant
‣ Keyboard navigation support
‣ Screen reader support
‣ Component focus consistent with DOM order
‣ Inclusive web and mobile experience
“Our 2024 blueprint is packed with upgrades — enhancing gluestack-ui, improving performance, introducing new components, supporting NativeWind, and developing tools for an enriched design system experience.”
CPO Atul Ranjan shares insights gained while building gluestack-ui and
We've got a present for you🎁!
Introducing our first-ever Black Friday Offer on gluestack-ui Pro — 100+ responsive, accessible UI components compatible with web and native platforms. 🔗
Our Table component with NativeWind is now LIVE.
This RSC-enabled component renders clean, semantic HTML elements on the web and seamlessly adapts to flex layout on native devices.
gluestack-ui delivers blazing fast performance with a babel plugin for pre-computing styles during the build process and executes runtime performance optimizations.
Check out performance benchmarks with some React Native libraries:
Details 👇
Presenting gluestack-ui v2.0 design kit!
- Seamless theme-based design in both dark and light mode, enhanced by Figma's variable feature.
- Collection of color palettes, border widths, spacing, and opacity for enhanced design flexibility.
Push to production faster with ready-to-use themed components from gluestack-ui.
Use
@gluestack
-ui/config package along with
@gluestack
-ui/themed to get preconfigured themed components.
Check out the themed components here 👉
The gluestack Figma Kit is more than just design assets— it's a powerful toolkit designed to streamline your process from concept to execution.
Boost your projects with efficiency, flexibility, and style! 🎨
@CARLOSZIEGLER
@gluestack
Gluestack made a lot of good eng choices, adding className support to Expo Router would make it easier to use gluestack out of the box
Tracking to hit over 100k downloads per week 🎉
The future is bright for NativeWind! Thanks to everyone that's been helping us prepare v4.1 for a release version ❤️
1/2
Introducing Episode 2 of the gluestack-ui Figma Kit Series 📽️
In this episode, we share how to
— Customize your design for gluestack plugin
— Update essential foundational tokens to align with your brand guidelines
Link below ⬇️
🔔New Release: Minor changes (with a lot of bug fixes) that will have a major impact. Some dependencies have also been updated.
PS: Thanks to all the community contributors to this release. Links to their contributions in 🧵
Waiting for content to load without any preview be frustrating.
Our new RSC-enabled skeleton component takes care of this by showing a placeholder preview, providing visual feedback while data loads.
Something big cooking...
We are testing gluestack-ui + nativewind to bring RSC support to
@geekyants
website.
- Most of the layout can be done with Box, HStack, VStack with full RSC support
- Aiming for ~70% full RSC support with gluestack-ui
Mo Khazali
@mo__javad
will be speaking at thegeekconf. Watch his video, where he is talking about the next trend in building frontend applications, and it’s going to be called ‘Universal First’ era.
Another week, another new component. 🎉
We have added a basic but very essential Card component. You can update the gluestack-ui/themed and gluestack-ui/config to get it.
We are actively working on adding new components and improving the existing ones. Let us know your
We've designed gluestack-ui v2 to be highly flexible and customizable.
The best part?
Its standout feature is universal compatibility — code it once and run it anywhere. 🚀
Using NativeWind, it supports Tailwind CSS classes, making styling as easy as copy-pasting. 📋🖌️
A well-structured design system can elevate project quality and efficiency. 📈
The gluestack-ui Design Kit is more than just components—it's a tool for cohesion, scalability, and smooth team collaboration. 🎨
Prompt-based coding with AI is super smooth, and we don't want you to miss out on that with gluestack-ui!
Here’s a sneak peek into the gluestack CodeGen that’s coming soon 👀
Hey folks! Explore our new storybook app featuring 30+ components for web and mobile! All components are built using
@gluestack
-ui with NativeWind, it's a dynamic playground to test and play around with the components.
Still fine-tuning, so pardon any hiccups.
We have released a new version of gluestack-ui and gluestack-style, addressing the following issues:
gluestack-ui:
1. Improved the LinearGradient component, now allowing you to pass any LinearGradient using as prop 🚀
2. Fixed InputAccessoryView background Color tokenization 🙌
1/4 🚀 Introducing gluestack-ui/themed-native-base – the perfect bridge for
@NativeBase
users!
Enjoy NativeBase features with the performance boost of gluestack-ui.
Let's get started with designing magic with gluestack-ui v2.0 Design Kit! ✨
🎨 Color palettes, spacing, and more at your fingertips!
🌗 Effortlessly create stunning light and dark mode designs with variable support
🧬 Infused with WCAG standards so that you don’t have to worry
🛠️ Use our VS Code Extension to avoid manual tasks while building with gluestack-ui.
Provides—
‣ Component snippets
‣ Bonus recipes
‣ Auto-imports
‣ Dynamic hooks & variables
Getting started 👇
We are excited to have Amazon added to the React Native showcase. Amazon has been using React Native for years for many apps, including the main Amazon Shopping app!
We're currently building the
@geekyants
website using
@gluestack
-ui with NativeWind components. With this method using copy-pastable components, customization becomes easier. Tailwind classes enhance the developer experience and simplify modifications.
1/3
This will enable className support for styling. We have 20+ components and patterns ready. You can try it out in your existing or new projects! We're actively working on adding remaining components.
More: