Why Chakra-UI is your secret lover... Stop denying it

Chakra-UI is a modern component library for react created by Segun adebayo. It comes with accessible, reusable, and composable React components that you need to build front-end applications.

Chakra-UI uses Emotion and Styled System. Style systems are great kinds of infrastructure that can be used to build a UI component library. They make so many things much easier.

A great note is that Chakra-UI is typescript friendly and ready for any react app.

CREATE-REACT-APP EXAMPLE

import React from 'react';
import {
  Button
} from '@chakra-ui/react';
import customTheme from "./customTheme";

const App = () => {
  return (
      <Button colorScheme="facebook" leftIcon={<FaFacebook />}>
    Facebook
  </Button>
  );
}

TYPESCRIPT EXAMPLE

import React from 'react';
import { Box } from 'react';

type props = {
   message: string;
};

const flexSettings = {
    flex: "1",
    minW: "300px",
    textAlign: "center",
    color: "white",
    mx: "6",
    mb: "6"
} as const; 

const Message = ({message}: props) => {

   return (
     <Box {...flexSettings}>
        {message}
     </Box>
   )
}

STYLED-COMPONENT EXAMPLE USING CHAKRA-UI

import {chakra} from '@chakra-ui/react';

const Card = chakra("div", {
   baseStyle: {
    h: '300px',
    w: '300px',
    rounded: "sm",
    shadow: "lg",
   }
})

...
<Card>
 hello there
</Card>