Theme reference

The base starter includes a set of pre-defined design tokens that you can use to style your components.

Use style props to theme your components.

<P fontSize="md" />

For responsive styles, separate your values using a pipe: |.

<P fontSize="sm|md|lg|2xl" />

Note: Any props not listed below such as textDecoration or transition or opacity) can use default CSS values.

<P textShadow="underline" />

Create a custom theme Extend base

Colors

color, backgroundColor (bg), borderColor, borderTopColor, borderBottomColor, borderLeftColor, borderRightColor, outlineColor, fill, stroke

Example

<P color="primary" bg="muted" />

text (#191924)

background (#fff)

heading (#07070a)

primary (#06f)

primaryHover (#005ae0)

secondary (#07070a)

secondaryHover (#191924)

accent (#fb3640)

accentHover (#fa0f1b)

muted (#f6f6f6)

mutedHover (#ebebeb)

border (#ebece9)

borderHover (#b9bdb3)

Font family

fontFamily

Example

<P fontFamily="body" />

Key	Value
`body`	Inter, sans-serif
`heading`	Inherit
`monospace`	SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

Key	Value
`xs`	0.75rem
`sm`	0.875rem
`md`	1rem
`lg`	1.125rem
`xl`	1.25rem
`2xl`	1.5rem
`3xl`	1.875rem
`4xl`	2.25rem
`5xl`	3rem
`6xl`	4rem

Font weight

fontWeight

Example

<H1 fontWeight="semibold" />

Key	Value
`hairline`	100
`thin`	200
`light`	300
`normal`	400
`medium`	500
`semibold`	600
`bold`	700
`extrabold`	800
`black`	900

Line height

lineHeight

Example

<P lineHeight="relaxed" />

Key	Value
`3`	.75rem
`4`	1rem
`5`	1.25rem
`6`	1.5rem
`7`	1.75rem
`8`	2rem
`9`	2.25rem
`10`	2.5rem
`none`	1
`tight`	1.25
`snug`	1.375
`normal`	1.5
`relaxed`	1.625
`loose`	2

Margin

margin (m), marginTop (mt), marginRight (mr), marginBottom (mb), marginLeft (ml), my, mx, top, right, bottom, left, gridGap, gridColumnGap, gridRowGap, gap, columnGap, rowGap

Example

<Div mt="2" mx="auto" />

Key	Value
`0`	0
`1`	0.25rem
`2`	0.5rem
`3`	0.75rem
`4`	1rem
`5`	1.25rem
`6`	1.5rem
`7`	1.75rem
`8`	2rem
`9`	2.25rem
`10`	2.5rem
`12`	3rem
`14`	3.5rem
`16`	4rem
`18`	4.5rem
`20`	5rem
`22`	5.5rem
`24`	6rem
`26`	6.5rem
`28`	7rem
`30`	7.5rem
`32`	8rem
`36`	9rem
`40`	10rem
`48`	12rem
`56`	14rem
`64`	16rem
`72`	18rem
`80`	20rem

Padding

padding (p), paddingTop (pt), paddingRight (pr), paddingBottom (pb), paddingLeft (pl), py, px, top, right, bottom, left, gridGap, gridColumnGap, gridRowGap, gap, columnGap, rowGap

Example

<Div py="6" />

Key	Value
`0`	0
`1`	0.25rem
`2`	0.5rem
`3`	0.75rem
`4`	1rem
`5`	1.25rem
`6`	1.5rem
`7`	1.75rem
`8`	2rem
`9`	2.25rem
`10`	2.5rem
`12`	3rem
`14`	3.5rem
`16`	4rem
`18`	4.5rem
`20`	5rem
`22`	5.5rem
`24`	6rem
`26`	6.5rem
`28`	7rem
`30`	7.5rem
`32`	8rem
`36`	9rem
`40`	10rem
`48`	12rem
`56`	14rem
`64`	16rem
`72`	18rem
`80`	20rem

Border

borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth

Example

<Div borderBottomWidth="1px" />

Key	Value
`0`	0
`1`	1px solid
`2`	2px solid
`3`	3px solid
`4`	4px solid
`5`	5px solid
`6`	6px solid
`7`	7px solid
`8`	8px solid
`9`	9px solid
`10`	10px solid

Border radius

borderRadius (rounded), borderTopRightRadius, borderTopLeftRadius, borderBottomRightRadius, borderBottomLeftRadius

Example

<Div rounded="2xl" />

Key	Value
`none`	0
`sm`	0.125rem
`md`	0.25rem
`lg`	0.375rem
`xl`	0.5rem
`2xl`	1rem
`3xl`	1.5rem
`4xl`	2rem
`full`	9999px

Box shadow

boxShadow, textShadow

Example

<Div boxShadow="2xl" />

Key	Value
`none`	none
`xs`	0 0 0 1px rgba(0, 0, 0, 0.05)
`sm`	0 1px 2px 0 rgba(0, 0, 0, 0.05)
`md`	0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
`lg`	0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
`xl`	0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
`2xl`	0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
`3xl`	0 25px 50px -12px rgba(0, 0, 0, 0.25)
`inner`	inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)
`outline`	0 0 0 3px rgba(66, 153, 225, 0.5)

Grid

col, row

Example

<Grid col="4" gap="8" />

Key	Value
`1`	repeat(1, minmax(0, 1fr))
`2`	repeat(2, minmax(0, 1fr))
`3`	repeat(3, minmax(0, 1fr))
`4`	repeat(4, minmax(0, 1fr))
`5`	repeat(5, minmax(0, 1fr))
`6`	repeat(6, minmax(0, 1fr))
`7`	repeat(7, minmax(0, 1fr))
`8`	repeat(8, minmax(0, 1fr))
`9`	repeat(9, minmax(0, 1fr))
`10`	repeat(10, minmax(0, 1fr))
`11`	repeat(11, minmax(0, 1fr))
`12`	repeat(12, minmax(0, 1fr))
`none`	none

Theme reference

Theme reference

Colors

Font family

Font size

Font weight

Line height

Margin

Padding

Border

Border radius

Box shadow

Grid