Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Refer to official documentation for detailed usage. →

Setup Provider

• For Chakra UI to work correctly, you need to setup the ChakraProvider at the root of your application. If you need to customize the default chakra theme, you can extend the theme from @chakra-ui/react and pass your extended theme to the provider.

pages/_app.tsx

import React from "react";import { AppProps } from "next/app";import { ChakraProvider } from "@chakra-ui/react";
import theme from "@definitions/chakra/theme";
function MyApp({ Component, pageProps }: AppProps): JSX.Element {  return (    <ChakraProvider theme={theme}>      <Component {...pageProps} />    </ChakraProvider>  );}
export default MyApp;

Customize Theme

Refer to official documentation on theme customization for detailed usage. →

• Extend the default theme with seperate overriden style files.

src/definitions/chakra/theme/index.ts

import { extendTheme } from "@chakra-ui/react";
import styles from "./styles";
import colors from "./foundations/colors";
import fontSizes from "./foundations/fontSizes";
const overrides = {  ...styles,  colors,  fontSizes,};
const theme = extendTheme(overrides);
export default theme;

• Override global styles.

src/definitions/chakra/theme/styles.ts

import { ThemeOverride } from "@chakra-ui/react";
type GlobalStyles = Pick<ThemeOverride, "styles">;
export default {  styles: {    global: {      h1: {        fontWeight: 500,        marginBottom: "0.5em",      },      p: {        marginBottom: "1em",      },    },  },} as GlobalStyles;

• Override other parts of the style(fontSize, colors...).

src/definitions/chakra/theme/foundations/fontSizes.js

export default {  lg: "18px",  "5xl": "46px",};

src/definitions/chakra/theme/foundations/colors.js

export default {  brand: {    900: "#1a365d",    800: "#153e75",    700: "#2a69ac",  },  header: {    100: "#20232a",  },  main: {    100: "#282c34",  },};

info

If you're curious as to what theme styles you can override, please reference the default theme foundation style files.

tip

All this work will be handled automatically by CLI, so you don’t need to do anything extra as long as you choose Chakra UI plugin during the project creation phase.

Component Style

Chakra UI also provides a way to write component styles that is easy to maintain over the life of a growing and changing project
Refer to official documentation on component style for detailed usage. →

Color Mode (Dark Mode)

Chakra UI comes with built-in support for managing color mode in your apps.
Refer to official documentation on color mode for detailed usage. →

Usage

Style Props

src/components/main/index.tsx

import React from "react";import { Box } from "@chakra-ui/react";
export const Main: React.FC = () => {  return (    <Box color="white" textAlign="center" py={10}>      ...    </Box>  );};

Refer to official documentation on style props for detailed usage. →

Customized Tokens

src/components/header/index.tsx

<Center bg="header.100">  <Logo /></Center>

useTheme

src/components/main/index.tsx

import React from "react";import { useTheme } from "@chakra-ui/react";
export const Main: React.FC = () => {  const theme = useTheme();  return (    <h1 style={{ fontSize: theme.fontSizes["5xl"] }}>superplate</h1>  );};

Responsive Styles

Chakra UI supports responsive styles out of the box. Instead of manually adding @media queries and adding nested styles throughout your code, Chakra UI allows you provide object and array values to add mobile-first responsive styles.

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>  This is responsive text</Text>

note

Chakra UI uses the min-width media query for responsive design.

Refer to official documentation on responsive styles for detailed usage. →

Adding Chakra UI to your project later

If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.

• Install @chakra-ui/react and its dependencies.

npm

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

yarn

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

• Follow instructions beginning in Setup Provider

Refer to official documentation on installation for detailed usage. →