React & React Native Components & Patterns

import from library & copy-paste styles all the way to victory
FOR
react native iconnext iconreact iconreact icon
tilde
npm create gluestack@1
accessibility
Themed components
Production-ready components for React Native, Next.js, Expo & React.
accessibility
accessibility
Unstyled Components
Extensive range of universal and versatile UI primitives - each have a blank canvas ready to be transformed into a captivating and attractive user interface tailored precisely to your unique requirements. Do what you want with them.
accessibility
accessibility
Accessibilty
Effortlessly utilize accessible gluestack-ui components designed for diverse users. Enjoy seamless integration, promoting an inclusive web and mobile experience.
keyboard
keyboard
keyboard
accessibility
Write once, run anywhere.
gluestack-ui enhances the universal nature of React Native and extends it with features like variants and media-queries and reduces the JS runtime overhead on web wherever necessary.
accessibility
Styling Features
Powered by gluestack-style
Styling solution with universal compatibility, media query & variants.
Universal
Media Query
Variants
Theme & token
Utility & SX props
Zero JavaScript with SSR
accessibility
Highly Performant
gluestack-ui can work with Zero JavaScript when combined with Next’s SSR & SSG. gluestack-ui comes packed with a babel-plugin that brings the runtime token interpolation to zero and reduces the hydration resulting in faster runtime. We aim to reduce it further, maybe with bundler plugins in the future.
accessibility
Themed components
Production-ready components for React Native, Next.js, Expo & React.
accessibility
accessibility
Unstyled Components
Extensive range of universal and versatile UI primitives - each have a blank canvas ready to be transformed into a captivating and attractive user interface tailored precisely to your unique requirements. Do what you want with them.
accessibility
accessibility
Accessibilty
Effortlessly utilize accessible gluestack-ui components designed for diverse users. Enjoy seamless integration, promoting an inclusive web and mobile experience.
keyboard
keyboard
keyboard
accessibility
Write once, run anywhere.
gluestack-ui enhances the universal nature of React Native and extends it with features like variants and media-queries and reduces the JS runtime overhead on web wherever necessary.
accessibility
Styling Features
Powered by gluestack-style
Styling solution with universal compatibility, media query & variants.
Universal
Media Query
Variants
Theme & token
Utility & SX props
Zero JavaScript with SSR
accessibility
Highly Performant
gluestack-ui can work with Zero JavaScript when combined with Next’s SSR & SSG. gluestack-ui comes packed with a babel-plugin that brings the runtime token interpolation to zero and reduces the hydration resulting in faster runtime. We aim to reduce it further, maybe with bundler plugins in the future.
30+
Components
100%
Customizable
All
Platforms
Something for everyone
Everything developers and designers need to build awesome products fast. Ideal for building design systems that guarantee better collaboration and increased productivity across teams.
accessibility
Developers: UI Component Library
Highly performant package that reduces runtime with a babel-plugin.
More options with themed as well as primitive components.
Open-source libraries for inclusive development.
keyboard
keyboard
keyboard
gluestack-ui logo
gluestack-style
Universal and Performant Styling Library.
gluestack-ui logo
VS Code Extension
Utilize our extension for quicker development with gluestack snippets, simplifying commonly used gluestack-ui components.
accessibility
Designers: Figma UI Kit
Extensive array of UI components with optional styling.
Universal for consistent look across multiple platforms.
Styling library with best-in-class designer experience.
figma kit flow image
accessibility
Businesses: Faster Development & Better ROI
Tailored enterprise solution with a powerful design system creator tool.
Faster-than-industry app development timelines.
Expert support and maintenance from the creators of the products.
47%
Faster Development Cycle
32%
Higher Growth Revenue
60%
Reduction in Design Debt
For every screen and style
30+ responsive components, that seamlessly adapt to various screen sizes and devices. Whether it's light, dark, or a custom colour scheme, the components remain appealing and functional for every possible environment.
Label
Helper Text
6/12
Label
Helper Text
6/12
Label
Helper Text
6/12
Info
Success
Error
Warning
Default
S
Ronald Richards
Nursing Assistant
Out of the box Accessibility
Effortlessly utilize accessible gluestack-ui components designed for diverse users. Enjoy seamless integration, promoting an inclusive web and mobile experience. Empower users, ensuring smooth interactions and superior usability.
Keyboard Support
gluestack-ui components are fully keyboard accessible, making navigation easy for users who prefer this method. Our focus on keyboard support ensures that everyone can access all content and functionality without needing a mouse.
Component
Make it your own
gluestack-ui offers a wide range of components that can be tailored to fit your brand and design needs. With the ability to easily customize and theme components, our library empowers you to create a unique and personalized user experience.

Job Application Form

Thank you for your interest in working with us. Please send your application by filling this form.
Name
Email
What is your current employement status?
Years of experience
0
20
Portfolio link
Button Label
Button variant
Button action
Input variant
Checkbox Label
Figma UI Kit for Designers
Offering an extensive array of UI components with optional styling that's universal across multiple platforms, along with a styling library designed for the best-in-class designer experience.
figma fold image
figma fold image
VS Code Extension
No need to write extensive lines of code. Just type the name of the desired component and get the entire length of code written for you. It's that simple!
Component Snippets -  icon image
Component Snippets - Instantly insert component code with shorthand snippets that begin with 'gs-' followed by the component name.
Additional Recipes -  icon image
Additional Recipes - Access a variety of predefined code templates beyond basic components.
Automatic Imports -  icon image
Automatic Imports - Simplify your workflow with automated import statements for Gluestack.
Dynamic hooks & Variables -  icon image
Dynamic hooks & Variables - Enhance functionality with hooks and variables that adapt to your needs.
gluestack-style as styling engine
Embodying the principles of gluestack-style, gluestack-ui offers a universal, performant solution for styling needs simplifying the creation of stunning UIs.
Learn more
right arrow
function App() {
const StyledButton = styled(Pressable, {
bg: "$primary700",
px: "$6",
py: "$3",
rounded: "$md",
_dark: {
bg: "$primary600",
},
})
const ButtonText = styled(Text, {
textAlign: "center",
fontSize: "$md",
lineHeight: "$md",
color: "$white",
})
return (
<Provider config={config}>
<StyledButton>
<ButtonText>Hello</ButtonText>
</StyledButton>
</Provider>
)
}