Universal and Performant Styling Library

MADE FOR
react native iconnext iconreact iconreact icon
import { styled } from "@gluestack-style/react"
export const Button = styled(
Pressable,
{
rounded: "$lg",
py: "$3",
px: "$9",
variants: {
variant: {
solid: { bg: "$backgroundLight100" },
outline: {
bg: " rgba(255, 255, 255, 0.24)",
borderWidth: "$1",
borderColor: "$borderLight100",
},
},
},
},
{}
)
Highly Performant
gluestack-style can work with Zero JavaScript when combined with Next’s SSR & SSG. gluestack-style 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.
Key Features
Styling solution with universal compatibility, media query & variants.
Universal
Media Query
Variants
Theme & token
Utility & SX props
Zero JavaScript with SSR
Universal
Media Query
Variants
Theme & token
Utility & SX props
Zero JavaScript with SSR
Best-in-class DX
With the goodness of TypeScript, you get the best developer experience. The types are generated for every feature, including variants, state, sx, utility props, and tokens!
code gif
Write once, run anywhere.
gluestack-style 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.
<15kb gzip
Bundle Size
Zero
Runtime style calculation
All
Platforms

Token and theme

Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms.
Learn more
const config = {
tokens: {
colors: {
primary50: "#dbf4ff",
primary100: "#addbff",
primary200: "#7cc2ff",
primary300: "#4aa9ff",
primary400: "#1a91ff",
},
space: {
"0": 0,
"0.5": 2,
"1": 4,
"1.5": 6,
},
fontSizes: {
"2xs": 10,
xs: 12,
sm: 14,
md: 16,
},
fontWeights: {},
fonts: {},
borderWidths: {},
radii: {},
},
}

Universal

gluestack-style offers a universal styling solution for React Native, Next.js, Expo & React. With optimized performance, you can enjoy consistent and reliable styling across all your applications.
Learn more
function App() {
const Box = styled(View, {
borderRadius: "$md",
h: "$20",
w: "$20",
_web: {
bg: "$violet600",
},
_ios: {
bg: "$blue600",
},
_android: {
bg: "$red600",
},
})
return (
<Provider config={config}>
<Box />
</Provider>
)
}

Utility Props

Utility props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.
Learn more
function App() {
const Box = styled(View, {})
return (
<Provider config={config}>
<Box bg="$primary500" h="$20" w="$20" rounded="$md" />
</Provider>
)
}

Variants

gluestack-style allows you to easily create different variations of a component with different styles. Using variant props in a UI component library allows for more flexibility and reusability of components.
Learn more
function App() {
const Button = styled(
Pressable,
{
px: "$3.5",
py: "$2.5",
rounded: "$md",
variants: {
variant: {
solid: {
bg: "$indigo600",
_text: {
color: "$white",
},
},
outlined: {
bg: "transparent",
borderWidth: "$1",
borderColor: "$indigo500",
_text: {
color: "$indigo300",
},
},
subtle: {
bg: "$indigo800_50",
_text: {
color: "$indigo300",
},
},
},
},
defaultProps: {
variant: "solid",
},
},
{
descendantStyle: ["_text"],
}
)
const ButtonText = styled(
Text,
{
textAlign: "center",
fontSize: "$md",
lineHeight: "$md",
},
{ ancestorStyle: ["_text"] }
)
return (
<Provider config={config}>
<View style={{ flexDirection: "row", gap: 16 }}>
<Button variant="solid">
<ButtonText>Solid</ButtonText>
</Button>
<Button variant="outlined">
<ButtonText>Outlined</ButtonText>
</Button>
<Button variant="subtle">
<ButtonText>Subtle</ButtonText>
</Button>
</View>
</Provider>
)
}

Media Query

gluestack-style provides support for responsive styles through the use of media queries.
Learn more
function App() {
const Button = styled(Pressable, {
bg: "$primary500",
p: "$3",
rounded: "$md",
shadow: "$4",
":hover": {
bg: "$primary600",
},
":active": {
bg: "$primary700",
},
"@md": {
bg: "$indigo500",
":hover": {
bg: "$indigo600",
},
":active": {
bg: "$indigo700",
},
},
})
const ButtonText = styled(Text, {
color: "$textDark50",
fontSize: "$md",
lineHeight: "$md",
textAlign: "center",
})
const [isHovered, setIsHovered] = useState(false)
const [isActive, setIsActive] = useState(false)
return (
<Provider config={config}>
<Button
states={{ hover: isHovered, active: isActive }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onMouseDown={() => setIsActive(true)}
onMouseUp={() => setIsActive(false)}
>
<ButtonText>Hello World</ButtonText>
</Button>
</Provider>
)
}