Chakra UI for modern font-end component library

Chakra UI is a modern component library for React. It’s made up of basic building blocks that can help you build the front end of your web application

To use Chakra UI in your React.js, run one of the following commands in your terminal:

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

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application ( index.js or main.js).

//inside index.js main file.
import { ChakraProvider } from '@chakra-ui/react';

function App() {
  // Wrap ChakraProvider at the root of your app
  return (
    < ChakraProvider >
      < YourRootComponent/ >
    < /ChakraProvider >
  )
}

Circular Progress Component

import { CircularProgress, CircularProgressLabel } from '@chakra-ui/react'
< CircularProgress value={80} />

Skeleton Component

import { Skeleton, SkeletonCircle, SkeletonText } from '@chakra-ui/react'
< Stack >
  < Skeleton height='20px' />
  < Skeleton height='20px' />
  < Skeleton height='20px' />
< /Stack >

Progress Component

import { Progress } from '@chakra-ui/react'
< Stack spacing={5} >
  < Progress colorScheme='green' size='sm' value={20} />
  < Progress colorScheme='green' size='md' value={20} />
  < Progress colorScheme='green' size='lg' value={20} />
  < Progress colorScheme='green' height='32px' value={20} />
< /Stack >

User pre-build component of Chakra UI

Also use pre-build templates component from Chakra Templates

For more ref visit this awesome-chakra-ui