Introduction to Chakra UI | Setup with React
Using Chakra UI in Your React App
Building a new React project can be a little intimidating when styling comes into play. Mostly, when I have a project idea and start a new React project, I don’t want to spend hours writing CSS, making animations, choosing a color theme, etc. as this can consume a huge amount of development time.
It’s no surprise many frameworks for styling exist these days. Examples include: Material UI, Bootstrap, React Bootstrap, Semantic UI, React Toolbox, Ant Design, React Foundation, etc.
However, If you want an accessible, beautiful and solid component library to start your next React app with speed, Chakra UI is a great place to start.
What is Chakra UI?
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. —Chakra docs
Getting started
Installing and setting up Chakra UI with react is pretty quick and easy. You can install with npm or yarn.
Inside your React project directory, install Chakra UI by running either of the following:
with npm
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motionor with Yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motionUSING create-react-app
Chakra UI has an official create-react-app template.
In order to generate a create-react-app project from a template, you pass the --template flag to the create-react-app command.
Using npm
npx create-react-app my-app — template @chakra-uiUsing yarn
yarn create react-app my-app — template @chakra-uiNB: if you are using typescript, The template name for the TypeScript project is @chakra-ui/typescript
For Chakra UI to work correctly, you need to add ChakraProvider at the root of your app.
That’s actually all you need to do to use Chakra UI in your react app.
Easy!!
Chakra has lots of customizable components.
Chakra also has Light and Dark Color modes which is super easy to customize.
Just import from @chakra-ui/react
It’s That simple.
