Text Styles - Chakra Ui

Overview

Text styles allows you to define textual css properties. The common properties are:

Font: font family, weight, size
Line height
Letter spacing
Text decoration
Text transform

Defining text styles

Text styles are defined using the defineTextStyles function.

import { defineTextStyles } from "@chakra-ui/react"

export const textStyles = defineTextStyles({
  body: {
    description: "The body text style - used in paragraphs",
    value: {
      fontFamily: "Inter",
      fontWeight: "500",
      fontSize: "16px",
      lineHeight: "24",
      letterSpacing: "0",
      textDecoration: "None",
      textTransform: "None",
    },
  },
})

Built-in text styles

Chakra UI provides a set of built-in text styles.

Update the theme

To use the text styles, update the theme object with the textStyles property.

import { createSystem, defineConfig } from "@chakra-ui/react"
import { textStyles } from "./text-styles"

const config = defineConfig({
  theme: {
    textStyles,
  },
})

export default createSystem(defaultConfig, config)

After updating the theme, run the typegen command to generate the typings. See the CLI docs for how to run typegen in postinstall, CI, and monorepos.

bash

npx @chakra-ui/cli typegen

Using text styles

Now you can use textStyle property in your components.

jsx

<Box textStyle="body">This is the body text style</Box>