In this Chakra UI Setup in React article we will learn all about chakra UI.
Table of Contents
What is 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.
Chakra UI Setup in React / how to install Chakra UI
Let us discuss the steps required to install Chakra UI.
1. Create a new project
The easiest way to generate a React project is by using the Create React App. Replace the first-app
text with your app’s name.
npx create-react-app first-app
cd first-app
2. Chakra UI Installation :
Then, we have to install the Chakra UI library and its dependencies.
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
3. Provider Setup
After installing Chakra UI, you need to set up the ChakraProvider
at the root of your application. This can be either in your index.jsx
or index.tsx
import * as React from 'react'
// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'
function App() {
// 2. Wrap ChakraProvider at the root of your app
return (
<ChakraProvider>
<App />
</ChakraProvider>
)
}
Chakra UI Setup in React
ChakraProvider Props
Name | Type | Default | Description |
---|---|---|---|
resetCSS | boolean | true | automatically includes <CSSReset /> |
theme | Theme | @chakra-ui/theme | optional custom theme |
colorModeManager | StorageManager | localStorageManager | manager to persist a users color mode preference in |
portalZIndex | number | undefined | common z-index to use for Portal |
4. Optional Setup
Customizing Theme :
If you intend to customise the default theme object to match your design requirements, you can extend the theme
from @chakra-ui/react
.
Chakra UI provides an extendTheme
function that deep merges the default theme with your customizations.
// 1. Import the extendTheme function
import { extendTheme, ChakraProvider } from '@chakra-ui/react'
// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
brand: {
900: '#1a365d',
800: '#153e75',
700: '#2a69ac',
},
}
const theme = extendTheme({ colors })
// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
return (
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
)
}
I hope you like this article. 🙂
Also Read :
- Tailwind CSS Setup
- Top 10 VS Code extensions
- JavaScript Absolute Beginner’s Guide
- Angular Material List Example
- React Complete Course