bg-gradient

Universal Themed & Unstyled Components

For React Native, Next.js, Expo & React
tilde
npm create gluestack
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 gluetstack-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 gluetstack-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.
function App() {
return (
<Box
maxWidth="$64"
borderColor="$borderLight200"
borderRadius="$lg"
borderWidth="$1"
my="$4"
overflow="hidden"
bg="$backgroundDark900"
sx={{
"@base": {
mx: "$5",
},
"@lg": {
my: "0",
},
_dark: {
borderColor: "$borderDark800",
},
}}
>
<Box>
<Image
h={150}
source={{
uri: "https://images.unsplash.com/photo-1514936477380-5ea603b9a1ca",
}}
/>
</Box>
<VStack px="$6" pt="$4" pb="$6">
<Text fontSize="$sm" my="$1.5">
August 16, 2023
</Text>
<Heading size="sm">Fresho Orange</Heading>
<Text my="$1.5" fontSize="$xs">
Oranges are a great source of vitamin C, which is essential for a
healthy immune system. Oranges are a great source of vitamin C, which
is important for maintaining a healthy immune system.
</Text>
<Text my="$1.5" fontSize="$xs" isTruncated="true">
Vitamin C also helps with the absorption of iron and the production of
collagen, which supports healthy skin, teeth, and bones.
</Text>
<Link href="https://gluestack.io/" isExternal>
<Text fontSize="$sm" color="$pink600">
Find out more
</Text>
</Link>
</VStack>
</Box>
)
}
30+
Components
100%
Customizable
All
Platforms
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 gluetstack-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 employee status?
Please provide your resume link
Button Label
Input variant
Button variant
Button action
Responsiveness
With gluestack-ui, you can build accessible and user-friendly applications for multiple platforms with ease. Our component library was designed to work seamlessly with React Native, Next.js, Expo and React, making it the perfect choice for developers who want to reach a broad audience, no matter their device.
menu-options
Homestay
File
Edit
View
8:15
menu-options
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
Based on gluestack-style
Embodying the principles of gluestack-style, gluestack-ui offers a universal, performant solution for styling needs. It supports responsive design, SSR, and requires no TypeScript configuration. It merges gluestack-style efficiency with React’s versatility, simplifying the creation of stunning UIs.
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>
)
}
Inspiration
This project wouldn't have been possible without the great work by community members and inspiration from these libraries.
tech logos
Get exclusive updates!
We can't do this alone, we would love feedback and the fastest way for us to reach out to you is via emails. We won't spam, I promise!
mail icon
Built with love at