Version 2.4.2


Minor Changes#

React 2.4.2#

  • Add ChakraBaseProvider, a minimal version of ChakraProvider that supplies just the theme tokens, and ignores components.

    Historically, one of the biggest causes of the large initial JS payload is the size of the component themes. With this approach, you get to apply the theme for just the component you need by using extendBaseTheme.

    Base theme refers to the minimal theme for just the design tokens

    import { ChakraBaseProvider, extendBaseTheme } from "@chakra-ui/react"
    import { Button } from "@chakra-ui/theme/components"
    const theme = extendBaseTheme({
    components: {
    function App() {
    return (
    <ChakraBaseProvider theme={theme}>
    <Component {...pageProps} />

Styled System 2.4.0#

  • Add support for textIndent style prop

CLI 2.2.0#

  • Add the flag --strict-token-types for @chakra-ui/cli tokens to generate strict types for theme tokens (e.g. color, spacing)

    chakra-cli tokens --strict-token-types
    // before
    <Box padding="abc" />
    // valid type, but "abc" is not available in the theme
    // after
    <Box padding="abc" /> // invalid
    // Type '"abc"' is not assignable to type '"1" | "2" | ... | undefined'.
  • Added support for setting the initially focused menu programmatically using initialFocusRef.

    const Example = () => {
    const itemRef = useRef(null)
    return (
    <Menu initialFocusRef={itemRef}>
    <MenuItem>Menu 1</MenuItem>
    <MenuItem ref={itemRef}>Menu 2</MenuItem>
    <MenuItem>Menu 3</MenuItem>

Button 2.0.13#

  • Added support for orientation prop in the ButtonGroup component.

    This makes it possible to now have vertical button groups when isAttached is set to true.

    <ButtonGroup isAttached orientation="vertical">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
    <Button>Button 4</Button>

Icon 3.0.13#

  • Added support for styling the Icon component from the theme object.

    const theme = extendTheme({
    components: {
    Icon: {
    width: "auto",

Patch Changes#

Radio 2.0.14#

  • Updated type of value and defaultValue to string instead of string | number. This reflects the internal implementation

Slider 2.0.14#

  • Expose SliderActions and SliderState types to improve documentation

Theme 2.2.2#

  • Fix issue where modal dialog scrolls beyond the content in Safari.
  • Fixed css variabled warning with Tabs when using the enclosed variant.
  • Export baseTheme object with includes only the theme tokens.

Theme Utilities 2.0.14#

  • Replaced tinycolor package with color2k for smaller bundle size

React Types 2.0.5#

  • Fixed issue where types were not exported correctly

Gatsby Plugin 3.0.7#

  • Fix peer dependency range to support latest version of Gatsby

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel