Default Theme

An overview of Chakra UI's default theme.


You probably noticed that without any configuration on our part, the Chakra UI components look pretty good. That is because we are provided with a default theme out of the box. You can custimize this theme easily, which we'll see in the next module, but for now let's take a look at the default theme so we can better understand it.

Colors

Chakra UI comes with a set of default colors. If you are familiar with Tailwind CSS, this should look familiar as the Chakra UI defaults are heavily inspired by Tailwind CSS.

Typography

There are 5 css properties in the default typography section.

  • Fonts
  • Font Sizes
  • Font Weights
  • Line heights
  • Letter Spacing

Below are the default configs:

Fonts

export default {
  fonts: {
    body: "system-ui, sans-serif",
    heading: "Georgia, serif",
    mono: "Menlo, monospace",
  },

Font Sizes

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

Font Weights

export default {
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },
};

Line Heights

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

Letter Spacings

export default {
  letterSpacings: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0",
    wide: "0.025em",
    wider: "0.05em",
    widest: "0.1em",
  },
};

Using the above code, if you applied a fontSize of lg to a Text component, it would render with a font-size of 1.125rem.

<Text fontSize="lg">I am a large text!</Text>

It is also important to note that by using lg, the text will be mobile responsive.

Breakpoints

Breakpoints allow us to easily make any components responsive. They simply render to media queries.

Below are the default breakpoints.

import { createBreakpoints } from "@chakra-ui/theme-tools"

export default createBreakpoints({
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
  "2xl": "96em",
})

Spacing

For spacing, we have padding, margin, and top, left, right, and bottom.

export default {
  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",
  },
}

Sizes

The sizes properties refer to width, height, maxWidth, minWidth, maxHeight and minHeight styles.

export default {
  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",
    },
  },
}

Border Radius

Border radius is a property that allows us to easily set the border radius of any component.

export default {
  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",
  },
}

Z-Index

Finally, we have z-index. Chakra UI recommends solving stacking without z-index. However, there are times where z-index will come in handy.

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

Last updated on August 05, 2021

Getting Started

Custom Theme


Legal

Terms

Disclaimer

Privacy Policy

Carlson Technologies Logo© Copyright 2021, Carlson Technologies LLC. All Rights Reserved.

Powered by

Vercel Logo