Getting Started

Install Chakra UI and its peer dependencies.

npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Create a theme object to include custom color, typography, and layout values. Chakra UI comes with a default theme, so this step is optional.

// example theme.js
export default {
  breakpoints: ["30em", "48em", "62em", "80em"],
  fonts: {
    heading: '"Avenir Next", sans-serif',
    body: "system-ui, sans-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": "4rem",
  },
};

// example theme.js
export default {
  breakpoints: ["30em", "48em", "62em", "80em"],
  fonts: {
    heading: '"Avenir Next", sans-serif',
    body: "system-ui, sans-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": "4rem",
  },
};

You can also extend the theme to add your custom colors, fonts, etc.

import { theme } from "@chakra-ui/core";

// Let's say you want to add custom colors
const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    brand: {
      900: "#1a365d",
      800: "#153e75",
      700: "#2a69ac",
    },
  },
};

import { theme } from "@chakra-ui/core";
// Let's say you want to add custom colors
const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    brand: {
      900: "#1a365d",
      800: "#153e75",
      700: "#2a69ac",
    },
  },
};

Add the theme to your application with the ThemeProvider, passing in the theme object as a prop.

import React from "react";
import { ThemeProvider } from "@chakra-ui/core";

// Use at the root of your app
<ThemeProvider theme={customTheme}>{props.children}</ThemeProvider>;

import React from "react";
import { ThemeProvider } from "@chakra-ui/core";
// Use at the root of your app
<ThemeProvider theme={customTheme}>{props.children}</ThemeProvider>;

Using components#

Simply import components by name from @chakra-ui/core package, as demonstrated below.

import { Button } from "@chakra-ui/core";

import { Button } from "@chakra-ui/core";

Injecting global styles#

Sometimes you may need to apply css reset styles to your application. Chakra UI exports a CSSReset that'll remove browser default styles. It's heavily inspired by Tailwind's preflight

🚨 We highly recommend that you add the CSSReset at the root of your application to ensure all components work correctly.

import { ThemeProvider, CSSReset } from '@chakra-ui/core'
import customTheme from "./theme"

function App({ children }) {
  return (
    <ThemeProvider theme={customTheme}>
      <CSSReset />
      {children}
    </ThemeProvider>
  );
}

import { ThemeProvider, CSSReset } from '@chakra-ui/core'
import customTheme from "./theme"
function App({ children }) {
  return (
    <ThemeProvider theme={customTheme}>
      <CSSReset />
      {children}
    </ThemeProvider>
  );
}

Adding Icons#

You can use custom icons from standard libraries like react-icons or you can add the icon path in the theme object.

To add the icon to the theme object, add the icons key as shown below.

// theme.js
export default {
  icons: {
    // Add Chakra's icons
    ...theme.icons,
    // Your custom icons
    search: {
      // The <path/> or <g> element for the svg. Note the use of  `fill=currentColor`
      path: (
        <path
          fill="currentColor"
          d="M23.384,21.619,16.855,15.09a9.284,9.284,0,1,0-1.768,1.768l6.529,6.529a1.266,1.266,0,0,0,1.768,0A1.251,1.251,0,0,0,23.384,21.619ZM2.75,9.5a6.75,6.75,0,1,1,6.75,6.75A6.758,6.758,0,0,1,2.75,9.5Z"
        />
      ),
      // This is the viewBox of the icon.
      viewBox: "0 0 24 24",
    },
  },
};

// theme.js
export default {
  icons: {
    // Add Chakra's icons
    ...theme.icons,
    // Your custom icons
    search: {
      // The <path/> or <g> element for the svg. Note the use of  `fill=currentColor`
      path: (
        <path
          fill="currentColor"
          d="M23.384,21.619,16.855,15.09a9.284,9.284,0,1,0-1.768,1.768l6.529,6.529a1.266,1.266,0,0,0,1.768,0A1.251,1.251,0,0,0,23.384,21.619ZM2.75,9.5a6.75,6.75,0,1,1,6.75,6.75A6.758,6.758,0,0,1,2.75,9.5Z"
        />
      ),
      // This is the viewBox of the icon.
      viewBox: "0 0 24 24",
    },
  },
};

Once you add the icons, you can then use them within the Icon component, like this;

<Icon name="search" color="red.500" />

<Icon name="search" color="red.500" />

Contributing#

Please see our contribution guidelines to learn how you can contribute to this project.

Proudly made in 🇳🇬

Released under the MIT License.

Getting Started

.css-12m0k8p{pointer-events:auto;}Using components.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Injecting global styles#

Adding Icons#

Contributing#

Using components#