Skip to content
Get packs

Guide · Open source

How to use Chakra UI: install and build your first React components

Updated · written with AI from the project's own documentation and checked against our catalogue data

Chakra UI is an open-source (MIT licensed) library of ready-made React components, such as buttons and form controls, that you can assemble into web interfaces. This guide shows how to install it with your package manager, what you need beforehand, and when it is a good fit. By the end you will know how to add Chakra UI to a React project and where to find the full documentation.

Chakra UIchakra-ui/chakra-ui · ★ 40.7k · MIT

Quick start

  1. 1Check prerequisites. Confirm that Node.js is installed and that you have a React project to work in.
  2. 2Choose your package manager. Pick npm, Yarn, pnpm or Bun, whichever your project already uses.
  3. 3Install the packages. Run the install command for your package manager to add @chakra-ui/react and @emotion/react.
  4. 4Import a component. Import a Chakra UI component from @chakra-ui/react into a React file in your project.
  5. 5Read the docs for setup details. Follow the installation guide at chakra-ui.com for the setup steps and component usage.

What you need before you install Chakra UI

Chakra UI is built for React. You need Node.js and an existing React project before you start. The library is specific to React, so it will not help if you are not writing React code.

  • Node.js installed on your machine
  • A React project to add the library to

Install Chakra UI with npm, Yarn, pnpm or Bun

To use Chakra UI components, install the @chakra-ui/react package together with its peer dependency @emotion/react. Run the command for the package manager your project uses.

  • npm: npm i @chakra-ui/react @emotion/react
  • Yarn: yarn add @chakra-ui/react @emotion/react
  • pnpm: pnpm add @chakra-ui/react @emotion/react
  • Bun: bun add @chakra-ui/react @emotion/react
npm i @chakra-ui/react @emotion/react

Use Chakra UI components in your app

Once the packages are installed, you import components from @chakra-ui/react into your React code and assemble them into your interface. The library provides prebuilt components such as buttons and form controls, so you do not have to style them from scratch.

For import examples, component props and setup steps, read the official installation guide and documentation linked below rather than relying on this summary.

  • Full docs for the latest version: https://chakra-ui.com
  • Installation guide: https://www.chakra-ui.com/docs/get-started/installation

Use Chakra UI with Next.js and React Server Components

The README states that Chakra UI works with Next.js RSC (React Server Components). If you use Next.js and want to try this support, the same install commands apply. Check the documentation for the setup details that your Next.js version needs.

Know the limits before you commit

Chakra UI brings its own design system. If you want a fully custom look without a component framework, it is the wrong tool. Installing it also means taking on Emotion, because @emotion/react is a required peer dependency. If you cannot accept that dependency, choose another library.

  • Requires React; not usable for non-React projects
  • Provides its own design system, so the look is not blank-slate
  • Depends on @emotion/react as a peer dependency
  • Comparable projects include Material UI, Mantine, shadcn/ui and React Bootstrap

What people use it for

  • Building web apps in React with prebuilt components such as buttons and form controls
  • Creating an internal design system for a team that works in React
  • Starting a Next.js project that uses React Server Components support
  • Building accessible interfaces with components that aim to handle accessibility

Frequently asked questions

How do I install Chakra UI?

Install the @chakra-ui/react package and its peer dependency @emotion/react. The README gives commands for npm, Yarn, pnpm and Bun, for example npm i @chakra-ui/react @emotion/react.

Is Chakra UI free to use?

Chakra UI is released under the MIT licence, as stated in the repository. Check the LICENSE file in the repository for the full terms.

What do I need to use Chakra UI?

You need Node.js and a React project. The library is designed for React, so it is not suitable for projects that do not use React.

Does Chakra UI work with Next.js?

The README says Chakra UI works with Next.js RSC (React Server Components). Consult the documentation for setup details.

Is Chakra UI an alternative to Material UI or shadcn/ui?

Material UI, Mantine, shadcn/ui and React Bootstrap are comparable component libraries. Chakra UI is a good pick if you want prebuilt accessible React components, and one of the others may suit you better if your priorities differ.

Can I use Chakra UI without Emotion?

No. The install requires @emotion/react as a peer dependency, so projects that cannot take on Emotion should consider another library.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Chakra UI suits React developers, teams and Next.js projects that want prebuilt, accessibility-focused components and are fine with Emotion as a dependency. It is a poor choice for non-React projects or for anyone who wants a fully custom look with no component framework.

Install options & downloads