Default Theme

The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more.

Theming with Chakra UI is based on the Styled System Theme Specification

Colors#

Add a theme.colors object to provide colors for your project. By default these colors can be referenced by the color, borderColor, backgroundColor, fill, stroke, styles.

We recommend adding a palette that ranges from 50 to 900. Tools like Smart Swatch, Coolors or Palx are available to generate these palettes.

// theme.js
export default {
colors: {
transparent: "transparent",
black: "#000",
white: "#fff",
gray: {
50: "#f7fafc",
// ...
900: "#1a202c",
},
// ...
},
}

Chakra provides a sensible default theme inspired by Tailwind CSS, but you can customize it to fit your design.

Black & White#

Black
#000000
White
#FFFFFF

Gray#

gray 50
#F7FAFC
gray 100
#EDF2F7
gray 200
#E2E8F0
gray 300
#CBD5E0
gray 400
#A0AEC0
gray 500
#718096
gray 600
#4A5568
gray 700
#2D3748
gray 800
#1A202C
gray 900
#171923

Red#

red 50
#FFF5F5
red 100
#FED7D7
red 200
#FEB2B2
red 300
#FC8181
red 400
#F56565
red 500
#E53E3E
red 600
#C53030
red 700
#9B2C2C
red 800
#822727
red 900
#63171B

Orange#

orange 50
#FFFAF0
orange 100
#FEEBC8
orange 200
#FBD38D
orange 300
#F6AD55
orange 400
#ED8936
orange 500
#DD6B20
orange 600
#C05621
orange 700
#9C4221
orange 800
#7B341E
orange 900
#652B19

Yellow#

yellow 50
#FFFFF0
yellow 100
#FEFCBF
yellow 200
#FAF089
yellow 300
#F6E05E
yellow 400
#ECC94B
yellow 500
#D69E2E
yellow 600
#B7791F
yellow 700
#975A16
yellow 800
#744210
yellow 900
#5F370E

Green#

green 50
#F0FFF4
green 100
#C6F6D5
green 200
#9AE6B4
green 300
#68D391
green 400
#48BB78
green 500
#38A169
green 600
#2F855A
green 700
#276749
green 800
#22543D
green 900
#1C4532

Teal#

teal 50
#E6FFFA
teal 100
#B2F5EA
teal 200
#81E6D9
teal 300
#4FD1C5
teal 400
#38B2AC
teal 500
#319795
teal 600
#2C7A7B
teal 700
#285E61
teal 800
#234E52
teal 900
#1D4044

Blue#

blue 50
#ebf8ff
blue 100
#bee3f8
blue 200
#90cdf4
blue 300
#63b3ed
blue 400
#4299e1
blue 500
#3182ce
blue 600
#2b6cb0
blue 700
#2c5282
blue 800
#2a4365
blue 900
#1A365D

Cyan#

cyan 50
#EDFDFD
cyan 100
#C4F1F9
cyan 200
#9DECF9
cyan 300
#76E4F7
cyan 400
#0BC5EA
cyan 500
#00B5D8
cyan 600
#00A3C4
cyan 700
#0987A0
cyan 800
#086F83
cyan 900
#065666

Purple#

purple 50
#FAF5FF
purple 100
#E9D8FD
purple 200
#D6BCFA
purple 300
#B794F4
purple 400
#9F7AEA
purple 500
#805AD5
purple 600
#6B46C1
purple 700
#553C9A
purple 800
#44337A
purple 900
#322659

Pink#

pink 50
#FFF5F7
pink 100
#FED7E2
pink 200
#FBB6CE
pink 300
#F687B3
pink 400
#ED64A6
pink 500
#D53F8C
pink 600
#B83280
pink 700
#97266D
pink 800
#702459
pink 900
#521B41

Typography#

To manage Typography options, the theme object supports the following keys:

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings
// example theme object
export default {
colors: {...},
fonts: {
body: "system-ui, sans-serif",
heading: "Georgia, serif",
mono: "Menlo, monospace",
},
fontSizes: {
xs: "12px",
sm: "14px",
md: "16px",
lg: "18px",
xl: "20px",
"2xl": "24px",
"3xl": "28px",
"4xl": "36px",
"5xl": "48px",
"6xl": "64px",
},
fontWeights: {
normal: 400,
medium: 500,
bold: 700,
},
lineHeights: {
normal: "normal",
none: "1",
shorter: "1.25",
short: "1.375",
base: "1.5",
tall: "1.625",
taller: "2",
},
letterSpacings: {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
},
};

Breakpoints#

To configure the default breakpoints used in responsive array values, add a breakpoints array to your theme. These values will be used to generate mobile-first (i.e. min-width) media queries, which can then be used to apply responsive styles.

For example, you can write <Box fontSize={["14px", "16px"]}/> to make the fontSize responsive.

// theme.js
export default {
breakpoints: ["30em", "48em", "62em", "80em"],
}

Spacing#

The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom styles.

export default {
space: {
px: "1px",
0: "0",
0.5: "0.125rem",
1: "0.25rem",
1.5: "0.375rem",
2: "0.5rem",
2.5: "0.625rem",
3: "0.75rem",
3.5: "0.875rem",
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",
20: "5rem",
24: "6rem",
28: "7rem",
32: "8rem",
36: "9rem",
40: "10rem",
44: "11rem",
48: "12rem",
52: "13rem",
56: "14rem",
60: "15rem",
64: "16rem",
72: "18rem",
80: "20rem",
96: "24rem",
},
}

By default, Chakra includes a comprehensive numeric spacing scale inspired by Tailwind CSS. The values are proportional, so 1 spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

Mental model: If you need a spacing of 40px, divide it by 4. That'll give you 10. Then use it in your component.

NameSpacePixels
000px
px1px1px
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px
123rem48px
143.5rem56px
164rem64px
205rem80px
246rem96px
287rem112px
328rem128px
369rem144px
4010rem160px
4411rem176px
4812rem192px
5614rem224px
6015rem240px
6416rem256px
7218rem288px
8020rem320px
9624rem384px

Sizes#

The sizes key allows you to customize the global sizing of components you build for your project. By default these sizes value can be referenced by the width, height, and maxWidth, minWidth, maxHeight, minHeight styles.

export default {
sizes: {
...theme.space,
full: "100%",
"3xs": "14rem",
"2xs": "16rem",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
},
}

A component like this: <Box w={4} h={3} /> will generate an empty div with width set to 1rem or 16px and height set to 0.75rem or 12px.

Border radius#

Chakra provides a set of smooth corner radius values.

export default {
borderRadius: {
none: "0",
sm: "0.125rem",
base: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
full: "9999px",
},
}

z-index values#

We recommend trying to solve stacking issues without z-index. You can read our recommendations and learn more about stacking contexts and z-index here.

Chakra provides a minimal set of z-indeces out of the box to help control the stacking order of components.

export default {
zIndices: {
hide: -1,
auto: "auto",
base: 0,
docked: 10,
dropdown: 1000,
sticky: 1100,
banner: 1200,
overlay: 1300,
modal: 1400,
popover: 1500,
skipLink: 1600,
toast: 1700,
tooltip: 1800,
},
}

Configuration reference#

Except for breakpoints, colors, and spacing, all the keys in the theme object map to one of Chakra's core theme. All of these keys can be replaced or extended.

Edit this page