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, and backgroundColor, fill, stroke, styles.

We recommend adding palette that go from 50 - 900. Use tools like Coolors or Palx to generate these palette.

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

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

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

Black & White#

Black

#000

White

#fff

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

#ceedff

blue 200

#90cdf4

blue 300

#63b3ed

blue 400

#4299e1

blue 500

#3182ce

blue 600

#2a69ac

blue 700

#1e4e8c

blue 800

#153e75

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",
    base: "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",
  },
};

// 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",
    base: "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 will be responsive.

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

// 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",
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "8": "2rem",
    "10": "2.5rem",
    "12": "3rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem",
    "32": "8rem",
    "40": "10rem",
    "48": "12rem",
    "56": "14rem",
    "64": "16rem",
  },
};

export default {
  space: {
    px: "1px",
    "0": "0",
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "8": "2rem",
    "10": "2.5rem",
    "12": "3rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem",
    "32": "8rem",
    "40": "10rem",
    "48": "12rem",
    "56": "14rem",
    "64": "16rem",
  },
};

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.

Name	Space	Pixels
0	0	0px
px	1px	1px
1	0.25rem	4px
2	0.5rem	8px
3	0.75rem	12px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
8	2rem	32px
10	2.5rem	40px
12	3rem	48px
16	4rem	64px
20	5rem	80px
24	6rem	96px
32	8rem	128px
40	10rem	160px
48	12rem	192px
56	14rem	224px
64	16rem	256px

Sizes#

The sizes key allows you to customize the global sizeing of components you build for your project. By default these spacing 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",
  },
};

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",
  },
};

For 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

Z-Index#

Chakra provides some zIndex values out of the box to 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,
  },
};

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,
  },
};

Icons#

All Chakra icons are stored in the theme object under the icons key. See the icons.

You can extend this object to add your own icons. Here are the steps:

Export the icon's svg from Figma, Sketch, etc.
Use a tool like SvgOmg to reduce the size and minify the markup.
Add the icon to the theme object.

Add the fill=currentColor attribute to the path or g so that when you this <Icon color="gray.200"/>, it works correctly.

// Step 1: Each icon should be stored as an object of `path` and `viewBox`
const customIcons = {
  icon1: {
    path: <path fill="currentColor" d="..." />,
    // If the icon's viewBox is `0 0 24 24`, you can ignore `viewBox`
    viewBox: "0 0 40 40",
  },
  icon2: {
    path: (
      <g fill="currentColor">
        <path d="..."/>
      </g>
    )
  }
};

// Step 2: Add the custom icon to the theme
const customTheme = {
  ...theme,
  icons: {
    ...theme.icons,
    ...customIcons,
  }
}

// Step 3: Pass the new theme to the ThemeProvider

<ThemeProvider theme={customTheme}>
  {/* app goes here */}
</ThemeProvider>

// Step 4: Now you can do this
<Icon name="icon1" color="green.200"/>

// Step 1: Each icon should be stored as an object of `path` and `viewBox`
const customIcons = {
  icon1: {
    path: <path fill="currentColor" d="..." />,
    // If the icon's viewBox is `0 0 24 24`, you can ignore `viewBox`
    viewBox: "0 0 40 40",
  },
  icon2: {
    path: (
      <g fill="currentColor">
        <path d="..."/>
      </g>
    )
  }
};
// Step 2: Add the custom icon to the theme
const customTheme = {
  ...theme,
  icons: {
    ...theme.icons,
    ...customIcons,
  }
}
// Step 3: Pass the new theme to the ThemeProvider
<ThemeProvider theme={customTheme}>
  {/* app goes here */}
</ThemeProvider>
// Step 4: Now you can do this
<Icon name="icon1" color="green.200"/>

Configuration reference#

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

See the full reference table of properties.

Proudly made in 🇳🇬

Released under the MIT License.