Developers will find Chakra UI to be their most useful partner. As a component toolkit for online services, Chakra UI makes it easy to construct inclusive apps with efficiency.
As a result of its accessibility and WAI-ARIA compliance, Chakra UI’s elements are simple to customize and re-theme using its API. However, this is only the tip of the iceberg regarding the advantages it offers developers.
In this post, we’ll take a closer look at some of the more advanced features of Chakra UI and how they may help you become more productive as a programmer.
What is Chakra UI?
Chakra UI is a component toolkit that helps developers quickly build accessible and reusable user interface components for their web applications. It’s built on top of React and uses the styled system for its theming engine.
Chakra UI’s goal is to make it easy for programmers to create beautiful, responsive, and accessible user interfaces with minimal effort. The toolkit includes a wide variety of ready-to-use components that are designed to be easily composable and extensible.
Chakra UI is open source, and its development is sponsored by Segment.
How to Install Chakra UI
You will have to type the following commands to incorporate Chakra in Your Project:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
You must configure the ChakraProvider at the root of your application after installing Chakra UI. Depending on the framework you use, this may be in your index.jsx, index.tsx, or app.jsx file.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Advanced Techniques in Chakra UI
Generating Real-time SVGs
You may wish to dynamically update your SVGs to reflect the current design while establishing new themes for your website. This necessitates the creation of distinct SVGs for each of the several themes.
Chakra UI, on the other hand, is a more user-friendly option. Using the useColorMode hook in Chakra UI, we can dynamically alter the fill colour of our SVGs.
UseColorMode can only be used once dark mode is implemented. Using dark mode with Chakra UI for the first time? This article will show you how to get it to work properly.
The useColorMode option is available after the dark mode has been enabled.
import { LightBulb, Moon, Sun, Vercel } from "../svgs";
import { Box, Button, Center, Stack, useColorMode } from "@chakra-ui/react";
export default function SVG() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Center>
<Box>
<Center>
<Button onClick={toggleColorMode}>
Switch to {colorMode === "light" ? "Dark" : "Light"}
</Button>
</Center>
<Stack direction={["column", "row"]} spacing="24px" mt={14}>
<LightBulb colorMode={colorMode} />
<Moon colorMode={colorMode} />
<Sun colorMode={colorMode} />
<Vercel colorMode={colorMode} />
</Stack>
</Box>
</Center>
);
}
The above code integrates the useColorMode hook and SVG to make them dynamic. Using useColorMode we can retrieve and alter colour mode. If you want to switch colours, you should use either colorMode or the toggleColor Mode function.
Chakra Themes
Chakra UI’s themes are applied using the Styled System Theme Specification technique. Themes in Chakra can impact a variety of aspects ranging from colour paletter to spacing.
You will just need to import the extendTheme function while adding the keys to modify tokens in the preset. Let’s have a look at this.
You just need to create a Theme.js file to get started.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
It adds two more colours to the theme object to make it more vibrant and appealing. According to the software specifications, you may create style markers for typefaces, breakpoints, font sizes, column widths, and more.
In order to take advantage of the newly introduced advanced features in this theme object, you must first install ChakraProvider at the root of the application.
import { ChakraProvider } from "@chakra-ui/react";
import theme from "theme";
import Nav from "Nav";
function MyApp({ Component, pageProps, router }) {
return (
<ChakraProvider theme={theme}>
<Nav />
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
After that, you direct ChakraProvider to use the theme object you created before. All of the Chakra components may now use brand colours.
Some projects may just need altering Chakra’s basic component styling rather than requiring a style modification in any way.
As an example of the component style object, here it is:
const ComponentStyle = {
// style object for base or default style
baseStyle: {},
// styles for different sizes ("sm", "md", "lg")
sizes: {},
// styles for different visual variants ("outline", "solid")
variants: {},
// default values for `size` and `variant`
defaultProps: {
size: "",
variant: "",
},
}
Now, we’ll just modify the Button and Heading parts.
const overrides = {
components: {
Button: {
baseStyle: {
borderRadius: "none",
},
sizes: {
small: {
px: 5,
h: "50px",
fontSize: "20px",
},
medium: {
px: 7,
h: "60px",
fontSize: "25px",
},
large: {
px: 8,
h: "70px",
fontSize: "30px",
borderRadius: "10px",
},
},
variants: {
primary: {
bg: "primary",
color: "#fff",
},
secondary: {
bg: "secondary",
color: "#fff",
},
ghost: {
bg: "transparent",
border: "1px solid red",
},
primaryGhost: {
bg: "transparent",
border: "1px solid",
borderColor: "primary",
},
secondaryGhost: {
bg: "transparent",
border: "1px solid",
borderColor: "secondary",
_hover: {
color: "#fff",
bg: "#BB1415",
},
},
},
},
Heading: {
baseStyle: {
fontFamily: "Inter",
fontWeight: "600",
},
sizes: {
small: {
fontSize: "20px",
},
medium: { fontSize: "25px" },
large: { fontSize: "30px" },
},
},
},
};
const theme = extendTheme(overrides);
export default theme;
We can get rid of the border-radius that was set by default for the Button by removing its baseStyle. You can alter the font size and typeface layout for the Heading. Using the above examples, you can understand how we can alter the standard styling of Chakra components.
Enhancing or altering the styles of Chakra components provides us with visibility and control over the appearance and functioning of our user interfaces.
Chakra and Third-Party Components
Chakra allows third-party modules to benefit from their style. As a result, combining third-party elements with Chakra UI requires fewer proprietary component wrappers.
The following is a list of the HTML elements supported by the Chakra factory:
import Image from "next/image";
import { Box, Center, chakra, HStack, VStack } from "@chakra-ui/react";
import woman from "../public/woman.jpg";
const ChakraNextImage = chakra(Image);
export default function factory() {
return (
<Center><HStack spacing={10}>
<Box width="400px" h="400px" position="relative">
<ChakraNextImage
src={woman}
alt="an img"
layout="fill"
objectFit="cover"
borderRadius="full"
/>
</Box>
</HStack>
</Center>
);
}
We integrate the Next.js Image component with Chakra UI in the code snippet above. Then, we set up a ChakraNextImage component, and through it, we can pass Chakra’s style props to Image.
Animations
You can define animations using Chakra UI’s keyframes helper. Keyframes take in a CSS keyframe definition and return an object you can use in styles:
import {
Box,
Button,
Center,
VStack,
keyframes,
} from "@chakra-ui/react";
import { LightBulb } from "svgs";
const spin = keyframes`
from {transform: rotate(0deg);}
to {transform: rotate(360deg)}
`;
export default function Transition() {
const spinAnimation = `${spin} infinite 2s linear`;
return (
<Center>
<VStack spacing={20}>
<Box animation={animation}>
<LightBulb />
</Box>
</VStack>
</Center>
);
}
Using the keyframes assistant, you can create the animation you see here. The animation prop allows us to animate Chakra UI components.
As the last step, pass spinAnimation into the Box component so that animations may be added to the Chakra UI apps.
Page Transitions
Page transitions may be added to our apps in order to improve the user’s experience when they move between pages.
The following is an example of how to achieve it with Chakra UI:
import { ChakraProvider, ScaleFade } from "@chakra-ui/react";
import theme from "theme";
import Nav from "Nav";
function MyApp({ Component, pageProps, router }) {
return (
<ChakraProvider theme={theme}>
<Nav />
<ScaleFade
key={router.route}
initialScale={0.9}
in="true"
>
<Component {...pageProps} />
</ScaleFade>
</ChakraProvider>
);
}
export default MyApp;
In order to implement page transitions, use the transition components from Chakra UI. The ScaleFade transition is used in the above line of code.
Please notify ScaleFade about your application’s path so that the transition can function as you move across the screen! The object provides data about the current path, which you can then send to ScaleFade‘s key prop. InitialScale and in prop are used to establish the starting scale of the transition and to make it happen when the component is rendered.
In this piece, we looked at a few of the features and capabilities that Chakra UI offers and how it assists us in our perfect experience. We have also explored how establishing theme objects and developing global styles might assist in maintaining the scalability of our system.
If you haven’t already, We believe this article has given you some ideas to streamline your Chakra UI development process.
Leave a Reply