Chakra UI is a component library that allows you to build accessible, reusable, and themeable components.

There are two types of components in Chakra UI. Single-part components are components that have a single part, such as a Button. Multi-part components are components that have multiple parts, such as a Input.

Single part components are those that can be styled as a whole, without the need to target individual parts. Examples of these include buttons, badges, and progress bars. To style these components, you can use the defineStyle and defineStyleConfig functions imported from @chakra-ui/react.

1// src/theme/components/button.ts
2import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
3
4const outline = defineStyle({
5  border: '2px dashed', // change the appearance of the border
6  borderRadius: 0, // remove the border radius
7  fontWeight: 'semibold', // change the font weight
8})
9
10export const buttonTheme = defineStyleConfig({
11  variants: { outline },
12})

This code defines a Button component with two variants, primary and secondary. You can customize the styles of each variant by adding or modifying the properties in the variants object.

Multipart components are those that have different parts that need to be styled separately. Examples of these include inputs, checkboxes, and radio buttons. To style these components, you can use the inputAnatomy object imported from @chakra-ui/anatomy and the createMultiStyleConfigHelpers function imported from @chakra-ui/react. For instance, to style an input, you can use the following code:

1// src/theme/components/input.ts
2import { inputAnatomy } from '@chakra-ui/anatomy'
3import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
4
5const { definePartsStyle, defineMultiStyleConfig } =
6  createMultiStyleConfigHelpers(inputAnatomy.keys)
7
8const baseStyle = definePartsStyle({
9  // define the part you're going to style
10  field: {
11    fontFamily: 'mono', // change the font family
12    color: 'teal.500', // change the input text color
13  },
14  addon: {
15    bg: 'gray.100', // change the background color of the addon
16  },
17})
18
19export const inputTheme = defineMultiStyleConfig({ baseStyle })

This code defines an Input component with two parts, field and addon. You can customize the styles of each part by adding or modifying the properties in said part. You can also define variants and default props in the same way as for single part components.

1// src/theme/index.ts
2import { extendTheme } from '@chakra-ui/react'
3import { inputTheme } from './components/input'
4import { buttonTheme } from './components/button'
5
6export const theme = extendTheme({
7  components: { 
8    Input: inputTheme
9    Button: buttonTheme
10  },
11})

And last but not least, you need to add these custom to your theme object. You can do this by importing the extendTheme function from @chakra-ui/react and adding the components object to the theme object.

Are you feeling inspired and want to step into the open source world? If so, you can contribute to Chakra UI by adding theming documentation for one of the components.