Utility Props

React Native has a great StyleSheet API which is optimal for component-based systems. @gluestack-style/react leverages it and adds a layer of utility props and constraint based designed tokens on top of it. gluestack-style is used as styling engine for @gluestack-ui/themed. To understand utility props, let's take an example.

With React Native (without gluestack-ui)

Let's try the traditional way of building the following card in React Native.
function Example() {
return (
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.metaContainer}>
<View>
<Text style={styles.timings}>Today @ 9PM</Text>
<Text style={styles.description}>Let's talk about avatar!</Text>
</View>
<Pressable style={styles.button}>
<Text style={styles.buttonText}>Remind me</Text>
</Pressable>
</View>
<Image
source={{
uri: "https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg",
}}
style={styles.avatar}
/>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#0891b2",
paddingVertical: 16,
paddingHorizontal: 12,
borderRadius: 5,
alignSelf: "center",
width: 375,
maxWidth: "100%",
},
timings: {
color: "#fff",
fontSize: "14px",
},
metaContainer: {
justifyContent: "space-between",
},
topContainer: {
flexDirection: "row",
justifyContent: "space-between",
},
avatar: {
height: 100,
width: 100,
borderRadius: 100,
},
description: {
color: "white",
marginTop: 5,
fontSize: 20,
},
button: {
backgroundColor: "#22d3ee",
alignSelf: "flex-start",
paddingHorizontal: 12,
paddingVertical: 4,
borderRadius: 2,
},
buttonText: {
fontWeight: "bold",
color: "white",
textTransform: "uppercase",
fontSize: 14,
},
})

With gluestack-ui

Let's try to build the same card using @gluestack-ui/themed. Since it is unstyled by default, we'll need to provide the config file from @gluestack-ui/config to the GluestackUIProvider. All the aliases are defined in config.
Once this is set up, you can easily apply styles to the layout using shorthands when working with @gluestack-ui/themed components.

Basic styling

You can apply aliases and styling props directly to the component.
function Example() {
return (
<Box
bg="#0891b2"
py="$4"
px="$3"
rounded="$md"
height="132px"
width={375}
maxWidth="100%"
>
<HStack justifyContent="space-between" height="100%">
<Box justifyContent="space-between">
<VStack space="xs">
<Text fontSize="$sm" color="$white">
Today @ 9PM
</Text>
<Text color="$white" fontSize="$xl">
Let's talk about avatar!
</Text>
</VStack>
<Pressable
rounded="$xs"
bg="#22d3ee"
alignSelf="flex-start"
py="$1"
px="$3"
>
<ButtonText
textTransform="uppercase"
fontSize="$sm"
fontWeight="$bold"
color="$white"
>
Remind me
</ButtonText>
</Pressable>
</Box>
<Image
source={{
uri: "https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg",
}}
alt="Aang flying and surrounded by clouds"
height="100px"
rounded="$full"
width="100px"
/>
</HStack>
</Box>
)
}
The above example demonstrates the usage of utility props along with VStack, HStack components. This approach allows us to style components without using StyleSheet API.

Complex styling

You can also handle more intricate styling, such as styles for different states, colormode, media queries, and descendants.
<Button
size="lg"
mb="$4"
bg="$green500"
$hover-bg="$green600"
$active-bg="$green700"
$_text-hover-color="$white"
>
<ButtonText>Button</ButtonText>
</Button>
  • To achieve this, you can use the $ prefix and specify the entire property path, like $hover-bg followed by its corresponding value.
  • We provide comprehensive TypeScript support for single-level utility props, including aliases and styles in the format ${states/media/colormode/platform/descendants}-{aliases / style}.
  • For something like $hover-sm-bg, TypeScript suggestions are not available, but you can write props prefixed with ${states/media/colormode/platform/descendants}-*.

More utility props

If your component's props become cluttered when using the above utility props, we offer support for an object-based approach to improve code maintainability.
<Button
size="lg"
mb="$4"
bg="$green500"
$hover={{
bg: "$green600",
_text: {
color: "$white",
},
}}
$active={{
bg: "$green700",
}}
>
<ButtonText>Button</ButtonText>
</Button>
  • In this case, you can specify states, colormode, media queries, and descendants in object form, prefixed with $. These objects take sx properties as values.
  • We have provided complete TypeScript support for this approach as well.

SX Prop

gluestack-ui supports the sx prop for overriding styles. The sx prop enables passing an object supporting tokens, media queries, nesting, and token-aware values to the component. sx accepts the same style object as the base style.
<Button
size="lg"
sx={{
marginBottom: "$4",
bg: "$green500",
":hover": {
bg: "$green600",
_text: {
color: "$white",
},
},
":active": {
bg: "$green700",
},
}}
>
<ButtonText>Button</ButtonText>
</Button>
In this example, the button has a green background instead of the default primary color, as the backgroundColor style is overridden using the sx prop. The sx prop is particularly useful for theming and responsive styles, as it enables easy style changes for a component based on the theme or viewport size. It is important to note that you should generally avoid using the sx prop, as it adds complexity to style calculations and may decrease performance.
Apart from productivity boosts and saving time, there are other benefits to styling components using utility props and sx prop. No need to name styles anymore, no need to define an object and think about naming it. Using utility-first and sx props, you can focus on creating reusable components instead of reusable stylesheets.Once you start writing styles this way, any other way will feel cumbersome.

Supported Utility Props

The following table shows a list of every style prop and the properties within each group.

Margin and padding

<>
<Box borderRadius="$md" bg="$primary200" m="$2" p="$5" />
<Box borderRadius="$md" bg="$primary200" mx="auto" px="$20" py="$5" />
<Box
borderRadius="$md"
bg="$primary200"
sx={{
"@sm": { m: "$2" },
"@lg": {
m: "$3",
},
}}
mt="$2"
pt="$10"
pr="$10"
/>
</>

Prop
CSS Equivalent
Theme Key
m, margin
margin
space
mt, marginTop
margin-top
space
mr, marginRight
margin-right
space
mb, marginBottom
margin-bottom
space
ml, marginLeft
margin-left
space
mx
margin-left and margin-right
space
my
margin-top and margin-bottom
space
p, padding
padding
space
pt, paddingTop
padding-top
space
pr, paddingRight
padding-right
space
pb, paddingBottom
padding-bottom
space
pl, paddingLeft
padding-left
space
px
padding-left and padding-right
space
py
padding-top and padding-bottom
space

Color and background color

<>
<Box p="$5" m="$2" borderRadius="$md" bg="$orange200" />
<Box p="$5" m="$2" borderRadius="$md" bgColor="$lightBlue200" py="$3">
<Text color="$red400" fontWeight="bold">
I ❤️ Gluestack
</Text>
</Box>
<Box p="$5" m="$2" borderRadius="$md" backgroundColor="$indigo300" />
</>

Prop
CSS Equivalent
Theme Key
color
color
colors
bg, background
background
colors
bgColor
background-color
colors
opacity
opacity
-

Typography

<>
<Text m="$2" fontSize="md">
Sample Text
</Text>
<Text m="$2" fontSize={32} textDecoration="underline">
Sample Text
</Text>
<Text m="$2" fontSize="2em" fontWeight="bold">
Sample Text
</Text>
<Text m="$2" textAlign="center">
Sample Text
</Text>
</>

Prop
CSS Equivalent
Theme Key
fontFamily
font-family
fonts
fontSize
font-size
fontSizes
fontWeight
font-weight
fontWeights
lineHeight
line-height
lineHeights
letterSpacing
letter-spacing
letterSpacings
textAlign
text-align
-
fontStyle
font-style
-
textTransform
text-transform
-
textDecoration
text-decoration
-

Layout, width and height

<>
<Box m="$2" borderRadius="$md" bg="$primary200" width="100%" height="$8" />
<Box m="$2" borderRadius="$md" bg="$primary200" w="75%" h="32px" />
<Box m="$2" borderRadius="$md" bg="$primary200" w="50%" h="$8" />
<Box m="$2" borderRadius="$md" bg="$primary200" w={256} />
<Box m="$2" borderRadius="$md" bg="$primary200" w="40px" h="$8" />
</>

Prop
CSS Equivalent
Theme Key
w, width
width
sizes
h, height
height
sizes
minW, minWidth
min-width
sizes
maxW, maxWidth
max-width
sizes
minH, minHeight
min-height
sizes
maxH, maxHeight
max-height
sizes
d, display
display
-
verticalAlign
vertical-align
-
overflow
overflow
-
overflowX
overflowX
-
overflowY
overflowY
-

Borders

<>
<Box p="$5" m="$2" borderRadius="$md" bg="$primary200" borderWidth="$1" />
<Box
p="$5"
m="$2"
borderRadius="$md"
bg="$primary200"
borderWidth="$2"
borderColor="$red400"
/>
<Box
p="$5"
m="$2"
borderRadius="$md"
bg="$primary200"
borderWidth="$2"
borderBottomColor="$red500"
borderTopWidth="$4"
/>
</>

Prop
CSS Equivalent
Theme Key
border
border
borders
borderWidth
border-width
borderWidths
borderStyle
border-style
borderStyles
borderColor
border-color
colors
borderTopWidth
border-top-width
borderWidths
borderTopColor
border-top-color
colors
borderRightWidth
border-right-width
borderWidths
borderRightColor
border-right-color
colors
borderBottomWidth
border-bottom-width
borderWidths
borderBottomColor
border-bottom-color
colors
borderLeftWidth
border-left-width
borderWidths
borderLeftColor
border-left-color
colors

Borders Radius

<>
<Box p="$5" m="$2" bg="$primary200" borderRadius="$md" />
<Box p="$5" m="$2" bg="$primary200" borderRadius="$full" />
<Box
p="$5"
m="$2"
bg="$primary200"
borderTopLeftRadius="$lg"
borderBottomRightRadius="$md"
/>
</>

Prop
CSS Equivalent
Theme Key
borderRadius
border-radius
radii
borderTopLeftRadius
border-top-left-radius
radii
borderTopRightRadius
border-top-right-radius
radii
borderBottomRightRadius
border-bottom-right-radius
radii
borderBottomLeftRadius
border-bottom-left-radius
radii

Position

<>
<Box
p="$5"
m="$2"
borderRadius="$md"
bg="$primary200"
position="absolute"
left="$64"
p="$7"
/>
<Box
p="$5"
m="$2"
borderRadius="$md"
bgColor="$orange300"
zIndex={2}
position="relative"
/>
<Box
p="$5"
m="$2"
borderRadius="$md"
backgroundColor="$indigo300"
position="absolute"
right="$32"
p="$7"
/>
</>

Prop
CSS Equivalent
Theme Key
position
position
-
zIndex
z-index
zIndices
top
top
space
right
right
space
bottom
bottom
space
left
left
space

Shadow

<>
<Box p="$5" m="$2" borderRadius="$md" bg="$primary200" softShadow="1" />
<Box p="$5" m="$2" borderRadius="$md" bg="$primary200" softShadow="3" />
<Box p="$5" m="$2" borderRadius="$md" bg="$primary200" hardShadow="5" />
<Box p=