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
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
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!
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.
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 🙌
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!
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 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
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 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 👇
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 👉
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.
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! 🎨
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 ⬇️
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.
🔔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 🧵
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
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.
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 👀
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 🙌
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'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. 📋🖌️
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!
1/4 🚀 Introducing gluestack-ui/themed-native-base – the perfect bridge for
@NativeBase
users!
Enjoy NativeBase features with the performance boost of gluestack-ui.
🛠️ 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'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:
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
gluestack-ui now supports utility props for all your styling needs.
Styling components using sx props can be a bit challenging to learn. Instead, you can pass utility props to any Styled Component.
Internally, these utility props are converted into sx props.
Demo in thread 👇
Thanks to your unwavering support, we are nominated for the annual
#ReactJS
Open Source Awards — ⚡️ Productivity booster category!
Now it is time to bring the prize home 🏆
Do vote for us here:
We need your help! 🗳️Vote for the winners of the annual
#ReactJS
Open Source Awards ceremony!
🚀Breakthrough of the year
🌟The most exciting use of technology
⚡️Productivity booster
🎉Fun side project of the year
Vote now:
Update on Themes 🗣️
Currently, using Themes we can only swap tokens, but that's about to change!
Soon devs can also write conditional stylings that can be deeply nested. We are also planning to implement color-mode using this feature.
Just wrapped our first React meetup in London and oh boy, what a blast it was!
Huge shoutout to
@ReactAdvanced
for giving us the opportunity to host this special event 🙌