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


Source

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 Themera, 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: '#171923',
},
// ...
},
}

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

Alphas#

Note: Toggle the site's color mode to see the change in the whiteAlpha colors.

Gray#

Red#

Orange#

Yellow#

Green#

Teal#

Blue#

Cyan#

Purple#

Pink#

Typography#

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

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings
import { extendTheme } from '@chakra-ui/react'
// example theme
const theme = extendTheme({
colors: {...},
fonts: {
body: "system-ui, sans-serif",
heading: "Georgia, serif",
mono: "Menlo, monospace",
},
fontSizes: {
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": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem",
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
lineHeights: {
normal: "normal",
none: 1,
shorter: 1.25,
short: 1.375,
base: 1.5,
tall: 1.625,
taller: "2",
"3": ".75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
},
letterSpacings: {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
},
});

Breakpoints#

Chakra UI comes with a predefined set of commonly used breakpoints.

Learn more about Responsive Styles and Customizing Breakpoints.

import { extendTheme } from '@chakra-ui/react'
const breakpoints = {
base: '0em',
sm: '30em',
md: '48em',
lg: '62em',
xl: '80em',
'2xl': '96em',
}
const theme = extendTheme({ breakpoints, ... })

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.

import { extendTheme } from '@chakra-ui/react'
const spacing = {
space: {
px: '1px',
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',
},
}
const theme = extendTheme({ ...spacing })

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
px1px1px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
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.

import { extendTheme } from '@chakra-ui/react'
const sizes = {
sizes: {
...theme.space,
max: 'max-content',
min: 'min-content',
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',
'7xl': '80rem',
'8xl': '90rem',
container: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
},
}
const theme = extendTheme({ sizes, ...})

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 defined by the radii key.

import { extendTheme } from '@chakra-ui/react'
const borderRadius = {
radii: {
none: '0',
sm: '0.125rem',
base: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
},
}
const theme = extendTheme({ ...borderRadius, ...})

z-index values#

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

import { extendTheme } from '@chakra-ui/react'
const zIndices = {
hide: -1,
auto: 'auto',
base: 0,
docked: 10,
dropdown: 1000,
sticky: 1100,
banner: 1200,
overlay: 1300,
modal: 1400,
popover: 1500,
skipNavLink: 1600,
toast: 1700,
tooltip: 1800,
}
const theme = extendTheme({ zIndices, ...})

Config#

The theme's config is to provide global settings that are used by different parts of the Chakra UI system.

PropertyDescriptionDefault
cssVarPrefix (v1.4)The prefix to use for the generated CSS custom propertieschakra
initialColorModeThe initial color mode your application should start with.
Can be light, dark or system
light
useSystemColorModeIf true, the chakra system will update color mode
based on your system preferences
false

You can leverage the extendTheme function to override a specific theme config property.

import { extendTheme } from '@chakra-ui/react'
const theme = extendTheme({
config: {
cssVarPrefix: 'ck',
},
})
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel