Chakra UI Intro

Posted on In

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Installation

For Vite Project, refer to Chakra UI Vite for installtion instructions. You need to install the ncecessary dependencies, add snippets, and also update vite.config.js.

Remember to add Provider at the root of your app. It can be added in main.jsx.

1
2
3
4
5
6
7
8
9
import { Provider } from "@/components/ui/provider"

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
)

after that you can use Chakra components in your app.

1
2
3
4
5
6
7
8
9
10
import { Button, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}

Box Component

The most abstract styling component in Chakra UI on top of which all other Chakra UI components are built. see Box Component for more details.

1
2
3
4
5
6
import { Box } from "@chakra-ui/react"

<Box p={4} m={4} bg="gray.100" borderRadius="md" borderColor="blue.200" borderWidth="2px">
        This is a box
</Box>

Container Component

Used to constrain a content’s width to the current breakpoint, while keeping it fluid. see Container Component for more details.

The default maxWidth is 8xl which maps to 90rem (1440px). You can change the maxWidth by using the maxWidth prop. The default maxWidth is 8xl which maps to 90rem (1440px). You can change the maxWidth by using the maxWidth prop.

1
2
3
<Container  maxW="8xl" bgColor="blue.200" p="1em" borderRadius="md" >
  <Text>Some Text</Text>
</Container>

Use the fluid prop to make the container stretch to fill the width of its parent.

1
2
3
<Container  maxW="8xl" bgColor="blue.200" p="1em" borderRadius="md" fluid>
  <Text>Some Text</Text>
</Container>

Flex Component

Flex is a layout component that allows you to create flexible and responsive layouts using CSS flexbox. see Flex Component for more details.

1
2
3
4
5
<Flex direction="row" align="baseline" justify="center" gap="4" >
  <Box bg="red"><Text>This is box1</Text></Box>
  <Box bg="blue"><Text>This is box2</Text></Box>
  <Box bg="green"><Text>This is box3</Text></Box>
</Flex>

Grid/SimpleGrid Component

Grid is a layout component that allows you to create flexible and responsive layouts using CSS grid. see Grid Component for more details.

1
2
3
4
5
<Grid templateColumns="repeat(3, 1fr)" gap={4}>
  <Box bg="red"><Text>This is box1</Text></Box>
  <Box bg="blue"><Text>This is box2</Text></Box>
  <Box bg="green"><Text>This is box3</Text></Box>
</Grid>

SimpleGrid provides a friendly interface to create responsive grid layouts with ease.

1
2
3
4
<SimpleGrid m="1em" columns="3" gap="4px">
  <Box bg="red"><Text>This is box1 in SimpleGrid</Text></Box>
  <Box bg="blue"><Text>This is box2 in SimpleGrid</Text></Box>
</SimpleGrid>

Stack Component

Stack is a layout component that allows you to create flexible and responsive layouts using CSS flexbox. see Stack Component for more details. You can use HStack for horizontal stack. You can use VStack for vertical stacks.

1
2
3
4
5
<Stack spacing={4} direction="row" align="baseline">
  <Box bg="red"><Text>This is box1</Text></Box>
  <Box bg="blue"><Text>This is box2</Text></Box>
  <Box bg="green"><Text>This is box3</Text></Box>
</Stack>

Text Component

The Text component is used to display text in your application. It is a simple component that allows you to style text using props. see Text Component for more details.

1
2
3
<Text fontSize="2xl" fontWeight="bold" color="blue.500">
        This is a text
</Text>

Button Component

The Button component is used to display a button in your application. It is a simple component that allows you to style buttons using props. see Button Component for more details.

1
2
3
4
5
import { Button } from "@chakra-ui/react"

<Button colorScheme="blue" size="lg" variant="solid">
  Click me
</Button>

Card Component

The Card component is used to display a card in your application. It is a simple component that allows you to style cards using props. see Card Component for more details.

1
2
3
4
5
6
7
8
9
10
11
12
import { Card, CardHeader, CardBody, CardFooter } from "@chakra-ui/react"

<Card.Root maxW={"sm"}>
  <Card.Header>Title</Card.Header>
  <Card.Body>Description</Card.Body>
  <Card.Footer>
    <HStack spacing="4">
      <Button colorPalette="blue">Button 1</Button>
      <Button colorPalette="red">Button 2</Button>
    </HStack>
  </Card.Footer>
</Card.Root>

Icons Component

Used to display an svg icon. see Icons for more details.
Chakra doesn’t provide any icons out of the box. Use popular icon libraries like react-icons

1
2
3
4
5
6
import { Icon } from "@chakra-ui/react"
import { FaApple } from "react-icons/fa"

<Icon size="lg" color="pink.700">
  <FaApple />
</Icon>

Responsive Design

See Responsive Design for more details on responsive design.

Chakra defines 5 breakpoints

1
2
3
4
5
6
7
8
const breakpoints = {
  base: "0em", // 0px
  sm: "30em", // ~480px
  md: "48em", // ~768px
  lg: "62em", // ~992px
  xl: "80em", // ~1280px
  "2xl": "96em", // ~1536px
}
1
<Text fontSize="2em" fontWeight={{ base: "medium", lg: "bold" }}>Responsive Text</Text>

A responsive text that is 2em on all screen sizes, and bold on large screens.

Padding and Margin

Chakra use properties to style components.

See Spacing for more details on padding and margin.

use p or padding for padding. px or paddingX for horizontal padding. py or paddingY for vertical padding.

m or margin for margin. mx or marginX for horizontal margin. my or marginY for vertical margin.

1
2
3
4
5
6
7
8
9
10
import { Box } from "@chakra-ui/react"

const Demo = () => {
  return (
      <Box p={4} m={4} bg="gray.100" borderRadius="md" borderColor="blue.200" borderWidth="2px">
        This is a box with padding and margin
      </Box>
    </Container>
  )
}

Sizing

see Sizing for more details on sizing.

use w or width for width. h or height for height. minW or minWidth for minimum width. maxW or maxWidth for maximum width. minH or minHeight for minimum height. maxH or maxHeight for maximum height.

1
2
3
4
5
6
7
8
9
import { Box } from "@chakra-ui/react"

const Demo = () => {
  return (
      <Box w="100px" h="100px" bg="gray.100" m="1em" borderRadius="md" borderColor="blue.200" borderWidth="2px">
        This is a box with width and height
      </Box>
  )
}

Background

See Background for more details on background.
use bg or background for background color. bgImage for background image. bgSize for background size. bgPosition for background position. bgRepeat for background repeat.

1
2
3
4
5
6
7
8
9
import { Box } from "@chakra-ui/react"
const Demo = () => {
  return (
      <Box bg="blue.500" color="white" p={4} borderRadius="md">
        This is a box with a blue background
      </Box>
    </Container>
  )
}

Virtual Color

Create color placeholders for better theming and customization. see Virtual Color for more details.

The colorPalette property is how you create virtual color.

1
2
3
<Button colorPalette="blue">
    Click me
</Button>

You can also use bg to set the background color of the button. The colorPalette property will be used as the default color for the button, and the bg property will override it.

1
2
3
<Button colorPalette="blue" bg={{ base: "colorPalette.500", _hover: "colorPalette.800" }}>
    Click me
</Button>

Design Token

Design tokens are the platform-agnostic way to manage design decisions in your application or website. It is a collection of attributes that describe any fundamental/atomic visual style. Each attribute is a key-value pair.

Chakra UI provides a set of color tokens that can be used to style your components. The color tokens are defined in the theme file. You can use the color tokens to style your components using the color prop. see Color Token for more details.

Color token - here “blue.500” and “gray.100” are color tokens. “md” is a design token that is used to set the border radius of the box. 

1
2
3
4
5
6
7
8
9
10
import { Box } from "@chakra-ui/react"

const Demo = () => {
  return (
      <Box color="blue.500" bg="gray.100" p={4} borderRadius="2">
        This is a box with a blue text color
      </Box>
    </Container>
  )
}

Semantic token - there are many semantic tokens. It is recommended to use semantic tokens for styling the components.

For color semantic tokens. see Color Semantic Tokens for more details.

1
2
3
4
<Container color="fg" bg="bg.muted">
        <Button color="fg.info" bg="bg.info" borderColor="border.info">Info Button</Button>
        <Button color="fg.error" bg="bg.error" borderColor="border.error">Error Button</Button>
</Container>

Theme

Dark Mode

see dark mode

run the following command to add the dark mode snippet to your project. 

1
npx @chakra-ui/cli snippet add color-mode

main.tsx

1
2
3
4
5
import { ColorModeProvider } from './components/ui/color-mode'

<ColorModeProvider>
  <App />
</ColorModeProvider>

Adding darkmode toggle

1
2
3
4
5
6
7
8
9
import { ColorModeButton } from "@/components/ui/color-mode"

export default function Page({ children }: { children: React.ReactNode }) {
  return (
    <>
      <ColorModeButton />
    </>
  )
}

Add Sematic Tokens

src/theme.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
    theme: {
        tokens: {
            colors: {
                lightRed: { value: "#f87171" },
                darkRed: { value: "#991919" },
            },
        },
        semanticTokens: {
            colors: {
                primary: {
                    value: { base: "#2563eb", _dark: "#a3cfff" },
                },
                danger: {
                    value: { base: "{colors.lightRed}", _dark: "{colors.darkRed}" }
                },
            },
        },
    },
})

export default createSystem(defaultConfig, config)

After defining semantic tokens, use the Chakra CLI to generate theme typings for your tokens.

1
npx @chakra-ui/cli typegen ./src/theme.ts

To use the theme in main.jsx

1
2
3
4
5
6
7
8
9
10
11
import theme from './theme.ts'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ChakraProvider value={theme}>
      <ColorModeProvider>
        <App />
      </ColorModeProvider>
    </ChakraProvider>
  </StrictMode>,
)