Skip to main content

Default Classes

Perhaps the biggest perk of using Zephyr is that it provides a suite of style "style classes" out of the box that you can use to style your UI elements. The available style classes are created from the set of default "style handlers" (outlined here) and your theme.

This page outlines the available style classes shipped with Zephyr out of the box. The examples here are using the default theme with no customizations, but see Extending the Theme for more info on how to customize the theme. Also note that these docs indicate which styles classes are "overridable" using the [x] syntax.


Before getting into the default handlers, we should discuss "constraint overrides". Most of the default handlers restrict you to using values from your theme constraints (this is in general a good thing!). However, sometimes you need to break free from your theme/scales and use a one-off value.

Many of the default handlers offer you an escape hatch to handle these one-off cases by using [x] syntax. For example, if you need to "nudge" a single element 3 pixels you could use a class like left:[3] to apply { left: 3 }, even if 3 is not in your theme's spacing constraints.


Zephyr uses your spacing constraints to generate margin helpers. You can set all margins with m:, horizontal/vertical margins with mx: and my: (respectively), and individual side margins with ml:, mr:, mt:, and mb:.

PrefixArgumentOverridableProperties SetExample
m:keyof theme['spacing']marginm:2, m:[32]
mx:keyof theme['spacing']marginLeft, marginRightmx:2, mx:[32]
my:keyof theme['spacing']marginTop, marginBottommy:2, my:[32]
ml:keyof theme['spacing']marginLeftml:2, ml:[32]
mr:keyof theme['spacing']marginRightmr:2, mr:[32]
mt:keyof theme['spacing']marginTopmt:2, mt:[32]
mb:keyof theme['spacing']marginBottommb:2, mb:[32]

Each of these margin style classes comes with a "negative" counterpart. E.g., something like m:3 will generally apply positive margin. You can use -m:3 to apply the same amount of margin but in the negative direction. This gives us an additional set of classes:

PrefixArgumentOverridableProperties SetExample
-m:keyof theme['spacing']-margin-m:2, -m:[32]
-mx:keyof theme['spacing']-marginLeft, -marginRight-mx:2, -mx:[32]
-my:keyof theme['spacing']-marginTop, -marginBottom-my:2, -my:[32]
-ml:keyof theme['spacing']-marginLeft-ml:2, -ml:[32]
-mr:keyof theme['spacing']-marginRight-mr:2, -mr:[32]
-mt:keyof theme['spacing']-marginTop-mt:2, -mt:[32]
-mb:keyof theme['spacing']-marginBottom-mb:2, -mb:[32]


The padding classes in Zephyr behave like their respective margin classes, but setting padding properties instead of margin. There are no "negative" padding classes.

PrefixArgumentOverridableProperties SetExample
p:keyof theme['spacing']paddingp:2, p:[32]
px:keyof theme['spacing']paddingLeft, paddingRightpx:2, px:[32]
py:keyof theme['spacing']paddingTop, paddingBottompy:2, py:[32]
pl:keyof theme['spacing']paddingLeftpl:2, pl:[32]
pr:keyof theme['spacing']paddingRightpr:2, pr:[32]
pt:keyof theme['spacing']paddingToppt:2, pt:[32]
pb:keyof theme['spacing']paddingBottompb:2, pb:[32]


Zephyr uses your spacing constraints to generate sizing helpers, allowing you to control the width and height of an element. You can control width (w:), minimum width (min-w:), maximum width (max-w:) as well as the respective height properties (h:, min-h:, and max-h:).

The aspect: classes allow you to set the aspect ratio of an element, which is convenient when you need an element with a fixed aspect ratio (e.g., presenting an image in a 16:9 format).

PrefixArgumentOverridableProperties SetExample
w:keyof theme['spacing']widthw:2, w:[32]
min-w:keyof theme['spacing']minWidthmin-w:2, min-w:[32]
max-w:keyof theme['spacing']maxWidthmax-w:2, max-w:[32]
h:keyof theme['spacing']heighth:2, h:[32]
min-h:keyof theme['spacing']minHeightmin-h:2, min-h:[32]
max-h:keyof theme['spacing']maxHeightmax-h:2, max-h:[32]
aspect:keyof theme['aspectRatios']aspectRatioaspect:16-9, aspect:[1.3]


You can set positioning type with relative and absolute. When using absolute, use the inset:, inset-x:, inset-y:, left:, right:, top:, and bottom: classes to position your element (based on spacing constraints).

PrefixArgumentOverridableProperties SetExample
relativeN/A{ position: "relative" }relative
absoluteN/A{ position: "absolute" }absolute
inset:keyof theme['spacing']top, bottom, left, rightinset:0, inset:[32]
inset-x:keyof theme['spacing']left, rightinset-x:0, inset-x:[32]
inset-y:keyof theme['spacing']top, bottominset-y:0, inset-y:[32]
left:keyof theme['spacing']leftleft:0, left:[32]
right:keyof theme['spacing']rightright:0, right:[32]
top:keyof theme['spacing']toptop:0, top:[32]
bottom:keyof theme['spacing']bottombottom:0, bottom:[32]

Like with the margin classes, the positioning classes have "negative" counterparts. This allows for things like -inset:3 to "overflow" content out of its parent. This then gives us the following set of classes:

PrefixArgumentOverridableProperties SetExample
-inset:keyof theme['spacing']-top, -bottom, -left, -right-inset:3, -inset:[32]
-inset-x:keyof theme['spacing']-left, -right-inset-x:3, -inset-x:[32]
-inset-y:keyof theme['spacing']-top, -bottom-inset-y:3, -inset-y:[32]
-left:keyof theme['spacing']-left-left:3, -left:[32]
-right:keyof theme['spacing']-right-right:3, -right:[32]
-top:keyof theme['spacing']-top-top:3, -top:[32]
-bottom:keyof theme['spacing']-bottom-bottom:3, -bottom:[32]


Use the hidden class to hide an element. The overflow: classes allow you to dictate overflow behavior.

PrefixArgumentOverridableProperties SetExample
hiddenN/A{ display: "none" }hidden
overflow:"visible", "hidden", "scroll"overflowoverflow:hidden, overflow:scroll

Background Color (and Opacity)

Based on your color constraints, Zephyr provides classes for setting the background color of elements via the bg: classes. The bg-opacity: classes can be used to set the background opacity of the element (values based on your opacities constraints). You can set the general opacity of an element with the opacity: classes.

PrefixArgumentOverridableProperties SetExample
bg:keyof theme['colors']backgroundColorbg:red-300, bg:[#ff00ff]
bg-opacity:keyof theme['opacities']NAbg-opacity:50, bg-opacity:[0.32]
opacity:keyof theme['opacities']opacityopacity:50, opacity:[0.32]

Borders (Width, Color, Radius)

Zephyr provides classes for styling borders, including border width, border color, and border radius. The border:, border-t:, border-b:, border-l:, and border-r: use your border width constraints to generate classes that control border width. The border-color: classes allow you to color your borders (based on your color constraints). The rounded:, rounded-t:, rounded-b:, rounded-l:, rounded-r: classes allow you to add border radii to your element (based on your border radii constraints).

PrefixArgumentOverridableProperties SetExample
border:keyof theme['borderSizes']borderWidthborder:hairline, border:[3]
border-t:keyof theme['borderSizes']borderTopWidthborder-t:hairline, border-t:[3]
border-b:keyof theme['borderSizes']borderBottomWidthborder-b:hairline, border-b:[3]
border-l:keyof theme['borderSizes']borderLeftWidthborder-l:hairline, border-l:[3]
border-r:keyof theme['borderSizes']borderRightWidthborder-r:hairline, border-r:[3]
border-color:keyof theme['colors']borderColorborder-color:red-300, border-color:[blue]
rounded:keyof theme['borderRadii']borderRadiusrounded:lg, rounded:[3]
rounded-t:keyof theme['borderRadii']borderTopLeftRadius, borderTopRightRadiusrounded-t:lg, rounded-t:[3]
rounded-b:keyof theme['borderRadii']borderBottomLeftRadius, borderBottomRightRadiusrounded-b:lg, rounded-b:[3]
rounded-l:keyof theme['borderRadii']borderBottomLeftRadius, borderTopLeftRadiusrounded-l:lg, rounded-l:[3]
rounded-r:keyof theme['borderRadii']borderBottomRightRadius, borderTopRightRadiusrounded-r:lg, rounded-r:[3]

Flex Properties

Zephyr provides some helpful flexbox helpers out of the box. Of note:

  • flex:1, flex:auto, flex:initial, flex:auto, and flex:none provide some presets for flex sizing. (E.g., flex:1 is often used to make an element fill all of its available space.)
  • justify: and items: classes let you control the justifyContent and alignItems properties (respectively).
  • flex:row, flex:row-reverse, flex:col, and flex:col-reverse let you control flex direction.
  • flex:wrap, flex:wrap-reverse, and flex:nowrap let you control the wrapping behavior of your element.
PrefixArgumentOverridableProperties SetExample
justify:"start", "end", "center", "between", "around", "evenly"justifyContentjustify:center
items:"start", "end", "center", "baseline", "stretch"alignItemsitems:center
flex:1N/A{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }flex:1
flex:autoN/A{ flexGrow: 1, flexShrink: 1, flexBasis: "auto" }flex:auto
flex:initialN/A{ flexGrow: 0, flexShrink: 1, flexBasis: "auto" }flex:initial
flex:noneN/A{ flexGrow: 0, flexShrink: 0, flexBasis: "auto" }flex:none
flex:rowN/A{ flexDirection: "row" }flex:row
flex:row-reverseN/A{ flexDirection: "row" }flex:row-reverse
flex:colN/A{ flexDirection: "column" }flex:col
flex:col-reverseN/A{ flexDirection: "column-reverse" }flex:col-reverse
flex:growN/A{ flexGrow: 1 }flex:grow
flex:grow-0N/A{ flexGrow: 0 }flex:grow-0
flex:shrinkN/A{ flexShrink: 1 }flex:shrink
flex:shrink-0N/A{ flexShrink: 0 }flex:shrink-0
flex:wrapN/A{ flexWrap: "wrap" }flex:wrap
flex:wrap-reverseN/A{ flexWrap: "wrap-reverse" }flex:wrap-reverse
flex:nowrapN/A{ flexWrap: "nowrap" }flex:nowrap

Z Index

The z: classes allow you to set the z-index of an element.

PrefixArgumentOverridableProperties SetExample
z:integerzIndexz:0, z:10


The text: classes adjust the font size of your text. Use the color: classes to change your text color. Use the font-weight: classes to adjust the weight of your text (e.g., bold text). Use tracking: classes to adjust the letter-spacing of your text. Use the leading: classes to adjust the (relative) line-height of your text. The italic, uppercase, lowercase, capitalize, underline, and line-through classes are one-off classes that apply transforms/decorations to your text. Use text-align: classes to align your text.

PrefixArgumentOverridableProperties SetExample
text:keyof theme['fontSizes']fontSize, lineHeighttext:sm, text:3xl
color:keyof theme['colors']colorcolor:red-300, color:[#ff00ff]
font-weight:keyof theme['fontWeights']fontWeightfont-weight:normal, font-weight:extrabold
tracking:keyof theme['letterSpacing']letterSpacingtracking:tight
leading:keyof theme['lineHeights']letterSpacingtracking:tight
italicN/A{ fontStyle: "italic" }italic
text-align:"auto", "left", "right", "center", "justify"textAligntext-align:center, text-align:left
uppercaseN/A{ textTransform: "uppercase" }uppercase
lowercaseN/A{ textTransform: "lowercase" }lowercase
capitalizeN/A{ textTransform: "capitalize" }capitalize
underlineN/A{ textDecorationLine: "underline" }underline
line-throughN/A{ textDecorationLine: "line-through" }line-through


Shadows are a bit trickier in React Native than on the web, and Android and iOS handle them differently. We provide some default shadows out of the box, but you can configure them yourself if you so please. To use shadows, simply use the shadow: classes.

PrefixArgumentOverridableProperties SetExample
shadow:keyof theme['shadows']elevation on Android; shadowOffset, shadowRadius, shadowOpacity on iOSshadow:sm, shadow:lg

Image Styling

React Native has some built-in styling controls for images. Use the width classes to control sizing. You can control the resize mode with the resize: classes. The tint: classes allow you to use your color constraints to set the tint color of the image.

PrefixArgumentOverridableProperties SetExample
resize:"cover", "contain", "stretch", "repeat", "center"resizeModeresize:cover, resize:contain
tint:keyof theme['colors']tintColortint:red-300, tint:[#ff00ff]