Chakra UI Typography Text

Last Updated : 12 Feb, 2024

Chakra UI Typography Text is used to render text and paragraph inside web application. The Text component renders HTML paragraph tag internally. The size of the Text can be controlled using the fontSize prop of the component that can take any of the following values: xs, sm ,md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, or any custom value provide like “50px“.

Prerequisites:

Approach:

We will create Text by passing different values of the fontSize prop. We will also pass custom value to the fontSize prop to customize the size of the Text rendered according to our needs.

Setting up React Application and Installing Chakra UI:

Step 1: Create a react application using the create-react-app.

npx create-react-app my-chakraui-app

Step 2: Move to the created project folder (my-chakraui-app).

cd my-chakraui-app

Step 3: After Creating the react app install the needed packages using below command

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

ps-text

The dependencies in the package.json file are:

  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Example: Below are the code snippets for the respective files.

Javascript

// Filename - App.js
 
import { ChakraProvider, Text } from "@chakra-ui/react";
import "./App.css";
import TextExample from "./TextExample";
 
function App() {
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="600"
                mt="1rem"
            >
                GeeksforGeeks
            </Text>
            <Text
                color="#000"
                fontSize="1rem"
                textAlign="center"
                fontWeight="500"
                mb="2rem"
            >
                Chakra UI Typography Text
            </Text>
            <TextExample />
        </ChakraProvider>
    );
}
 
export default App;

Javascript

import React from "react";
import { Box, Text } from "@chakra-ui/react";
 
export default function TextExample() {
    return (
        <Box
            display="flex"
            flexDirection="column"
            gap="20px"
            alignItems="center"
        >
            <Text fontSize="4xl">4XL sized Text</Text>
            <Text fontSize="xl">XL sized Text</Text>
            <Text fontSize="sm">SM sized Text</Text>
            <Text fontSize="25px">Custom 25px sized Text</Text>
            <Text fontSize="3rem">Custom 3rem sized Text</Text>
        </Box>
    );
}