Before beginning coding one significant question sprung up always: “Which library would it be a good idea to style the components?”
I’ve worked on various libraries such as Bootstrap, Material UI or styled-components. And you may be thinking why you need another UI library when you already have a big alternative. Recently, Chakra UI ⚡️ has gained a lot of attraction because of its accessibility and high customization.
Installation⚙️
Chakra UI can be installed via NPM/Yarn.
// If you are using npm:
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
// or, using Yarn:
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
Once the packages are installed, a provider needs to be configured.
import { ChakraProvider } from "@chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
Benefits of Chakra UI 📖
- Simpler Components : The best feature of Chakra UI is how components are designed to be small so that you can compose them together. You can build bigger elements easily by arranging them the same as HTML tags.
Let's look here: Box and Text are the most basic components just like div and p tags respectively.
<Header>
<Box w={{ base: "70%", sm: "50%", md: "40%" }}>
<Text>Hey, Adyasha!</Text>
<Button>Click me</Button>
</Box>
</Header>
Don't forgot to import the components: Header, Box, Text from @chakra-ui/react
Note: For better sight, you can check the official documentation, there you can see plenty of components which will be enough for building your project.
- Easy to theme and customize : One of the advantages of Chakra UI is that you can easily adjust it to your design needs. Inside the styles folder, Create a theme.js file. You can specify things like font-family, font-sizes, colors, breakpoints, etc.
import { extendTheme } from '@chakra-ui/react'
const customtheme = extendTheme({
Heading: {
variants: {
h1: {
fontSize: '4xl', fontWeight: 'bold'
},
h2: {
fontSize: '2xl', fontWeight: 'semibold'
}
}
}
})
export default customtheme
- Dark mode support : By default, most of Chakra's components are dark mode compatible. A little bit of change in
theme config and you are good to go ✈︎
Note: In some cases, when you switch to dark mode and refresh the page, you might experience a quick flash of white mode before it switches correctly and they're looking to fix it.
- Responsive styles : Chakra UI supports responsive styles out of the box. To add them, we can set default breakpoints or you can create your own.
import { createBreakpoints } from "@chakra-ui/theme-tools"
const breakpoints = createBreakpoints({
sm: "30em",
md: "48em",
lg: "62em",
xl: "80em",
"2xl": "96em",
})
You can use these breakpoints to resize your box or div:
<Box width={{sm: '200px', md: '400px', xl: '600px'}}>
Me, fully responsive :)
</Box>
Preview 👀:
I built a simple project or you can say just a landing page with NextJS and Chakra UI and the reason behind this project is to learn more about the features of Chakra UI and it was by far the easiest component library I’ve tried so far.
Take a sneak peek:
This is all only a little model I think if you want to cover all the customisation of this library go check the official documentation.
📍 Conclusion:
As a promising new library, it is constantly improving and the hype is building around the library. More components will probably be added soon. So you can consider using it for your next React project :D
I share what I think on Twitter💙.
