January 23, 2026

Introducing gluestack-ui v4 Alpha: Modern Design, Powerful Animations, and Enhanced Developer Experience

Sanchit KumarBuilding gluestack-ui

We're incredibly excited to announce gluestack-ui v4 alpha — a transformative evolution of our universal component library that brings modern design patterns, powerful animations, and an exceptional developer experience to React Native and Next.js applications.After months of development, community feedback, and careful testing, v4 represents our vision for the future of universal component libraries. This release introduces significant improvements across design, performance, and developer experience while maintaining the copy-paste philosophy you love.

The Journey to v4

When we started planning v4, we asked ourselves a fundamental question: "What would make gluestack-ui the best choice for modern app development in 2026?" The answer came from listening to our community — designers, developers, and teams who depend on gluestack-ui daily:

Designers wanted a familiar, modern design language that doesn't require starting from scratch

Developers wanted better performance and smoother animations that feel native

Teams wanted easier theming and customization without complexity

v4 delivers on all three fronts while introducing groundbreaking features that set a new standard for universal component libraries.

🎨 shadcn-Inspired Design System

We've completely redesigned our entire component library to align with shadcn/ui — one of the most popular and beloved design systems in modern web development.

Why shadcn?

Familiar Design Language If you've worked with shadcn/ui on the web, you'll feel right at home with gluestack-ui v4. The visual language, component patterns, and design principles are consistent across platforms. Modern Aesthetic Clean, minimal, and professional out of the box. Our components look great without any customization, yet they're incredibly easy to adapt to your brand. Community Alignment By aligning with a design system that millions of developers already know and love, we're making it easier for teams to move between web and mobile development. Easy Customization Well-thought-out defaults that are simple to override. Every component has been designed with customization in mind.

What's Changed

All 40+ components have been completely redesigned:

Refined spacing and typography for better visual hierarchy

Improved contrast ratios for enhanced accessibility

Consistent component variants (default, outline, ghost, link, etc.)

Better focus states and interactive feedback

Harmonized color usage across all components

🌈 Semantic Color System

One of the most significant changes in v4 is our new semantic color token system. Moving away from numeric color scales to meaningful, purpose-driven names.

The New Color Architecture

{
  // Semantic base colors
  background: 'rgb(var(--background))',
  foreground: 'rgb(var(--foreground))',

  // Component-specific colors
  primary: 'rgb(var(--primary))',
  secondary: 'rgb(var(--secondary))',
  accent: 'rgb(var(--accent))',
  muted: 'rgb(var(--muted))',

  // State colors
  destructive: 'rgb(var(--destructive))',

  // UI element colors
  border: 'rgb(var(--border))',
  input: 'rgb(var(--input))',
  ring: 'rgb(var(--ring))',
}

Why Semantic Colors?

Intuitive Naming Colors describe their purpose, not their appearance.

primary

is clearer than

blue500

. Effortless Theming Change your entire app's look by updating a few CSS variables. No need to search through components. Dark Mode Made Simple Perfect light/dark mode support with a single theme toggle. All color transitions are handled automatically. Type-Safe Full TypeScript support ensures you never use a color token that doesn't exist.

⚡ Modern Animation Engine

v4 introduces a powerful new animation foundation built on react-native-reanimated (~4.2.1), bringing native-quality animations to your applications.

Why react-native-reanimated?

Native Performance

Animations run on the UI thread, not the JavaScript thread

Guaranteed 60 FPS even under heavy JavaScript load

Smooth animations that feel native to each platform

Better battery efficiency

Ecosystem Excellence

Official recommendation from Expo and React Native teams

Actively maintained and continuously improved

Largest community support in the React Native ecosystem

Future-proof for upcoming React Native features

Developer Experience

Declarative animation API

Worklets for complex gesture handling

Excellent debugging tools

TypeScript support built-in

Components Powered by Reanimated

These components now deliver silky-smooth animations:

Accordion - Smooth expand/collapse

Drawer - Native-feeling slides

Modal - Graceful entrance/exit

Menu - Fluid open/close

Popover - Delightful transitions

Toast - Elegant notifications

And more...

Some components still use

@legendapp/motion

for optimal performance in specific use cases. We'll continue optimizing based on community feedback.

🚀 Performance Improvements

v4 delivers measurable performance gains across the board: | Metric | v3 | v4 | Improvement | |--------|----|----|-------------| | Initial Render (40 components) | 312ms | 198ms | 37% faster | | Animation Smoothness | 52 FPS | 60 FPS | 15% improvement | | Bundle Size (core + utils) | 156KB | 142KB | 9% smaller | | Memory Usage (sustained) | 28.4 MB | 24.1 MB | 15% reduction | Benchmarks performed on iPhone 14 / Pixel 7 with production builds These aren't just numbers — you'll feel the difference in real-world applications, especially on mid-range and lower-end devices.

🛠️ Enhanced Developer Experience

One-Command Upgrade

Migrating from v3 to v4 is incredibly straightforward:

npx gluestack-ui@alpha upgrade

The CLI automatically:

Detects your current version

Installs all required dependencies

Updates configuration files

Handles platform-specific setup

Guides you through manual steps

Import Compatibility

Great news! v3 and v4 use identical import patterns. Your existing imports work without changes:

// These imports work in both v3 and v4!
import { createButton } from '@gluestack-ui/core/button/creator';
import { createCard } from '@gluestack-ui/core/card/creator';
import { tva } from '@gluestack-ui/utils/nativewind-utils';

Updated Documentation

We've completely refreshed our documentation:

New documentation site: v4.gluestack.io

Comprehensive migration guides with step-by-step instructions

Interactive examples for every component

Video tutorials for common task

Performance optimization tips and best practices

🌍 Platform Support

v4 works seamlessly across all major platforms: Mobile

✅ Expo (SDK 50+)

✅ React Native CLI (0.72+)

✅ Expo 55 beta support

Web

✅ Next.js (13, 14, 15)

✅ App Router with React Server Components

✅ Pages Router

✅ React Native Web

Optimization

✅ Hermes engine optimized

✅ New Architecture ready

✅ Turbopack compatible

🔄 Migration Guide

For New Projects

Start fresh with the latest:

npm create gluestack@alpha

Choose your preferred platform:

Expo - Mobile-first development

Next.js - Web-first development

React Native CLI - Pure React Native

Migrating from v3

Automated Migration (Recommended):

npx gluestack-ui@alpha upgrade

Key Migration Steps:

Step 1:
Update Dependencies
Step 2:
Update Color Tokens
Step 3:
Re-copy Components
Step 4:
Update Babel (Expo/RN CLI only)
Step 5:
Test Everything

Full migration guide available at v4.gluestack.io/ui/docs/guides/more/upgrade-to-v4

📦 What's Included

v4 includes 40+ production-ready components: Layout Box, Center, HStack, VStack, Grid, Container, Divider Forms Button, Input, Textarea, Checkbox, Radio, Switch, Select, Slider Data Display Card, Badge, Avatar, Table, List, Accordion Feedback Alert, Toast, Progress, Spinner, Skeleton Overlays Modal, Drawer, Popover, Tooltip, ActionSheet, Menu Navigation Tabs, Link Typography Heading, Text Each component is:

Fully accessible with ARIA support

Highly customizable with variants and theming

TypeScript-ready with comprehensive types

Production-tested in real-world applications

🔧 New Features

Enhanced Accessibility

Improved ARIA labels and roles

Better keyboard navigation

Screen reader optimizations

High contrast mode support

Focus management improvements

Superior TypeScript Support

More precise type definitions

Better IntelliSense in your editor

Stricter prop validation

Generic component types

Improved autocomplete

Flexible Customization

Easier variant creation

Better className composition

More granular style control

Theme inheritance

CSS variable integration

📱 Updated KitchenSink Demo

Our KitchenSink demo app has been completely rebuilt for v4:

All components showcased with real examples

Interactive playground for testing

Performance demonstrations

Theme customization UI

Dark mode toggle

Code examples for every feature

Try it now:

git clone https://github.com/gluestack/gluestack-ui
cd gluestack-ui/apps/kitchen-sink
npm install
npm run ios # or npm run android

🗺️ What's Next

We're just getting started with v4! Here's what's coming:

v4.1 (Q1 2026)

Uniwind support for enhanced performance

Tailwind v4 compatibility

Additional performance optimizations

v4.2 (Q2 2026)

More component variants

Enhanced theming APIs

Additional platform support

Beyond

More components based on demand

Advanced animation capabilities

Extended customization options

Community-requested features

🙏 Acknowledgments

v4 wouldn't be possible without:

Our Community: 200+ contributors and thousands of users

Early Testers: Developers who tested alpha builds

Sponsors: Companies supporting gluestack development

React Native Team: For react-native-reanimated

Open Source Community: For inspiration and feedback

📚 Resources

Documentation

Community

Discord - Join 5,000+ developers

GitHub - Star us!

Twitter - Follow for updates

YouTube - Video tutorials

Support

GitHub Issues

Discussions

Stack Overflow

🚀 Get Started Today

Ready to experience the future of universal components? New Project:

npm create gluestack@alpha

Upgrade Existing:

npx gluestack-ui@alpha upgrade

Explore Docs: v4.gluestack.io As this is an alpha release, your feedback is invaluable. We want to hear:

What you love about v4

What could be improved

Which features you'd like next

Your migration experience

How to Share:

Open issues on GitHub

Join discussions on Discord

Tweet with #gluestackui

Share your projects with us!

We can't wait to see what you build with gluestack-ui v4! This is just the beginning of an exciting journey, and we're thrilled to have you along for the ride. Happy coding! 🎨✨

gluestack-ui v4 alpha is available now. Start building at v4.gluestack.io

React & React Native Components & Patterns

Created by

Resources

Products

Legals