Skip to content
Theme UI
GitHub

Component Variants

The @theme-ui/components package uses custom variants to allow you to completely customize the look and feel of each component.

The following table lists each component's variant group and default variant name where applicable.

ComponentVariant GroupDefault Variant
Gridgrids
Buttonbuttonsprimary
Closebuttonsclose
IconButtonbuttonsicon
MenuButtonbuttonsmenu
Texttext
Headingtextheading
Linklinksstyles.a
NavLinklinksnav
Imageimages
Avatarimagesavatar
Cardcardsprimary
Containerlayoutcontainer
Labelformslabel
Inputformsinput
Selectformsselect
Textareaformstextarea
Radioformsradio
Checkboxformscheckbox
Sliderformsslider
Badgebadges
Alertalerts
Messagemessages
Progressstyles.progress
Dividerstyles.hr

The following components support the variant prop, but do not include default variant keys.

  • Box
  • Flex
  • Donut
  • Spinner
  • Embed
  • AspectRatio
  • AspectImage

Additional variants can be added to each group to create multiple styles for a single component. For example, a secondary button style can be added to theme.buttons.secondary then applied to any Button using the variant prop.

// example using a variant
<Button variant='secondary'>
Secondary
</Button>

Example Theme

// example theme
{
// base theme...
buttons: {
primary: {
fontWeight: 'bold',
color: 'white',
bg: 'primary',
'&:hover': {
bg: 'dark',
},
},
},
text: {
caps: {
textTransform: 'uppercase',
letterSpacing: '.2em',
},
heading: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading',
},
display: {
// extends the text.heading styles
variant: 'text.heading',
fontSize: [6, 7, 8],
fontWeight: 'display',
},
},
cards: {
primary: {
padding: 2,
borderRadius: 4,
boxShadow: '0 0 4px 1px rgba(0, 0, 0, 0.5)',
},
},
}
Edit the page on GitHub
Previous:
Components
Next:
Box