Chakra UI Typography

Chakra UI is a simple and effective component-based library, that allows developers to build modern and attractive UI’s for their website’s frontends. Developers can simply use the components pre-defined in Chakra UI in their React Code to work faster and write less.

Chakra UI Typography is a feature of ReactJS for styling and formatting text content. It is used to create and organize customized style props that remain consistent without repeating text properties.

Prerequisite:

• NPM and Node
• React
• React Chakra UI

Approach:

We will be using the Text component to render text and paragraphs while using various text props to include the typography feature in the React components. The various props used are “fontSize“, “textAlign“, “fontWeight“, “fontFamily“, “noOfLines” and so on. The “noOfLines” prop truncates the text after a specific number of lines to maintain the responsiveness of the UI.

Steps to create React application and installing module:

Step 1: Create a React application using the following command:

npm create-react-app gfg-typography-app

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd gfg-typography-app

Step 2: This will install all the necessary starter files for you. Now we will install the Chakra UI library using the following command:

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

Project Structure:

The updated dependencies in the package.json file will look like this

 "dependencies": {
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "framer-motion": "^6.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
}

Example: Write down the code in respective files. Inside your src folder, open “App.js”, where we will write our Chakra UI typography code. Below is the code for the same.

Javascript

//App.js

// Filename - App.js

import { ChakraProvider, Text}
    from "@chakra-ui/react";
import Article from "./Article";

import "./App.css";

function App() {
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="600"
                my="1rem">
                GeeksforGeeks - ReactJS Chakra UI concepts
            </Text>
            <Article />
        </ChakraProvider>
    );
}

export default App;

Javascript

// Article.js

import {
  Flex,
  Box,
  Text,
  Stack,
} from "@chakra-ui/react";
import './fonts/font.css';

const Article = () => {

  return (
    <Box bg='lightgrey' w='100%' p={4} >
      <Flex justifyContent="center">
        <Flex w="full" direction="column"
          w="60%" alignItems="center">
          <Text as="h1" style=
            {
              {
                fontFamily: 'BlueParty',
              }
            } fontWeight="bold">
            Typography by Chakra UI
          </Text>
          <Text noOfLines={[1, 2, 3]}>
            "Typography is a feature for styling
            and formatting the text content.
            It is used to create customized headings,
            inline subheadings, lists, paragraphs, aligning,
            adding more design-oriented font styles, and much more."
          </Text>
          <Text style=
            {
              {
                fontFamily: 'GreatVibes',
              }
            }>
            This is my text using "Greatvibes.otf" font file
          </Text>
          <Stack spacing={2}>
            <Text fontSize='xl'>
              This is text in xl size
            </Text>
            <Text fontSize='lg' color='tomato'>
              This is text in lg size
            </Text>
            <Text fontSize='md' color='aquamarine'>
              This is text in md size</Text>
            <Text fontSize='sm' color='aliceblue'>
              This is text in sm size</Text>
            <Text fontSize='xs'>
              This is text in xs size</Text>
          </Stack>
        </Flex>
      </Flex>
    </Box>
  );
};
export default Article;

CSS

/** font.css **/
@font-face {
    font-family: BlueParty;
    src: url(BigParty4Blue-2575.woff);
}

@font-face {
    font-family: GreatVibes;
    src: url(GreatVibes-Regular.otf);
}

Steps to run the application:

npm start

Output: This will show the responsive output (with text ellipsis) after the size of the above output is reduced with truncated text. This shows the working of “noOfLines” prop of Chakra-UI.