Convert Figma logo to code with AI

chakra-ui logochakra-ui

⚡️ Simple, Modular & Accessible UI Components for your React Applications

37,442
3,205
37,442
296

Top Related Projects

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

A utility-first CSS framework for rapid UI development.

An enterprise-class UI design language and React UI library

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

17,396

👩‍🎤 CSS-in-JS library designed for high performance style composition

Quick Overview

Chakra UI is a simple, modular, and accessible component library for React applications. It provides a set of customizable and reusable components that help developers build user interfaces quickly and efficiently. Chakra UI is designed with a focus on accessibility, theming, and responsive design.

Pros

  • Highly customizable and themeable components
  • Excellent accessibility support out of the box
  • Responsive design with built-in support for different screen sizes
  • Well-documented with comprehensive guides and examples

Cons

  • Learning curve for developers new to component-based UI libraries
  • Some advanced customizations may require deeper knowledge of the library
  • Limited set of pre-built components compared to some other UI libraries
  • Performance impact when using many components in a large application

Code Examples

  1. Creating a simple button with Chakra UI:
import { Button } from '@chakra-ui/react'

function MyButton() {
  return <Button colorScheme="blue">Click me</Button>
}
  1. Using Chakra UI's responsive styles:
import { Box } from '@chakra-ui/react'

function ResponsiveBox() {
  return (
    <Box
      bg="red.500"
      w={[300, 400, 500]}
      h={['100px', '200px', '300px']}
    >
      Responsive Box
    </Box>
  )
}
  1. Creating a form with Chakra UI components:
import { VStack, Input, Button } from '@chakra-ui/react'

function SimpleForm() {
  return (
    <VStack spacing={4}>
      <Input placeholder="Enter your name" />
      <Input placeholder="Enter your email" type="email" />
      <Button colorScheme="green" type="submit">
        Submit
      </Button>
    </VStack>
  )
}

Getting Started

To start using Chakra UI in your React project, follow these steps:

  1. Install Chakra UI and its peer dependencies:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
  1. Wrap your application with the ChakraProvider:
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      {/* Your app components */}
    </ChakraProvider>
  )
}
  1. Start using Chakra UI components in your application:
import { Button, Box, Text } from '@chakra-ui/react'

function MyComponent() {
  return (
    <Box>
      <Text fontSize="2xl">Welcome to Chakra UI</Text>
      <Button colorScheme="teal">Get Started</Button>
    </Box>
  )
}

Competitor Comparisons

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

Pros of Material-UI

  • More comprehensive component library with a wider range of pre-built components
  • Stronger ecosystem with additional tools and extensions
  • Longer history and larger community, potentially leading to better support and resources

Cons of Material-UI

  • Steeper learning curve due to more complex API and customization options
  • Heavier bundle size, which may impact performance in smaller projects
  • Stricter adherence to Material Design guidelines, potentially limiting design flexibility

Code Comparison

Material-UI:

import { Button, ThemeProvider, createTheme } from '@mui/material';

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">Click me</Button>
    </ThemeProvider>
  );
}

Chakra UI:

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

function App() {
  return (
    <ChakraProvider>
      <Button colorScheme="blue">Click me</Button>
    </ChakraProvider>
  );
}

Both libraries offer component-based UI development with theming capabilities. Material-UI requires more setup with createTheme and ThemeProvider, while Chakra UI provides a simpler approach with ChakraProvider. Material-UI uses specific prop names like variant, whereas Chakra UI uses more intuitive props like colorScheme.

A utility-first CSS framework for rapid UI development.

Pros of Tailwind CSS

  • Highly customizable with a utility-first approach
  • Smaller bundle size due to purging unused styles
  • Rapid prototyping and development with pre-defined classes

Cons of Tailwind CSS

  • Steeper learning curve for developers new to utility-first CSS
  • Can lead to verbose HTML with multiple classes
  • Less out-of-the-box component styling compared to Chakra UI

Code Comparison

Tailwind CSS:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Chakra UI:

<Button colorScheme="blue" size="md">
  Button
</Button>

Summary

Tailwind CSS offers a utility-first approach with high customization and smaller bundle sizes, while Chakra UI provides a more component-based structure with pre-styled elements. Tailwind excels in rapid prototyping but may lead to verbose HTML, whereas Chakra UI offers a smoother learning curve with its component library. The choice between the two depends on project requirements and team preferences.

An enterprise-class UI design language and React UI library

Pros of Ant Design

  • More comprehensive component library with a wider range of pre-built components
  • Stronger enterprise-level design system with consistent patterns and guidelines
  • Better support for complex data visualization and form handling

Cons of Ant Design

  • Steeper learning curve due to its extensive API and configuration options
  • Less flexibility in customization compared to Chakra UI's more modular approach
  • Larger bundle size, which may impact initial load times for applications

Code Comparison

Ant Design button example:

import { Button } from 'antd';

const MyButton = () => (
  <Button type="primary" size="large">
    Click me
  </Button>
);

Chakra UI button example:

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

const MyButton = () => (
  <Button colorScheme="blue" size="lg">
    Click me
  </Button>
);

Both libraries offer similar component APIs, but Ant Design often requires more specific prop names (e.g., type="primary") while Chakra UI uses more generic props (e.g., colorScheme="blue"). Chakra UI's approach allows for easier customization and theme integration, while Ant Design's specific props ensure consistency with its design system.

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Pros of styled-components

  • More flexible and powerful CSS-in-JS solution
  • Better support for dynamic styling based on props
  • Easier to create and manage complex component styles

Cons of styled-components

  • Steeper learning curve for developers new to CSS-in-JS
  • Potentially larger bundle size due to runtime styling
  • Lack of pre-built components and design system

Code Comparison

styled-components:

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  padding: 10px 20px;
  border: 2px solid blue;
`;

Chakra UI:

import { Button } from "@chakra-ui/react"

<Button colorScheme="blue" variant={primary ? "solid" : "outline"}>
  Click me
</Button>

styled-components offers more flexibility in styling, allowing for complex CSS logic within the template literal. Chakra UI provides a more structured approach with pre-defined props and variants, making it easier to maintain consistency across the application but potentially limiting customization options.

17,396

👩‍🎤 CSS-in-JS library designed for high performance style composition

Pros of Emotion

  • More flexible and lightweight, allowing for custom styling solutions
  • Better performance due to smaller bundle size and optimized runtime
  • Supports object styles, which can be easier for some developers to work with

Cons of Emotion

  • Requires more setup and configuration compared to Chakra UI's out-of-the-box components
  • Less opinionated, which may lead to inconsistent designs across teams
  • Steeper learning curve for developers new to CSS-in-JS

Code Comparison

Emotion:

import { css } from '@emotion/react'

const style = css`
  background-color: hotpink;
  &:hover {
    color: blue;
  }
`

Chakra UI:

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

<Box
  bg="hotpink"
  _hover={{ color: 'blue' }}
>
  Hello
</Box>

Emotion provides more granular control over styles, while Chakra UI offers a more declarative approach with pre-built components and utility props. Chakra UI is built on top of Emotion, combining its power with a comprehensive component library and design system.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Chakra logo

Build Accessible React Apps with Speed ⚡️


Bundle Size Github Checks MIT License NPM Downloads Github Stars Discord


Chakra UI is a comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

Table of contents

Documentation

It's the https://chakra-ui.com website for the latest version of Chakra UI. For older versions head over here

Features

  • Ease of Styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props. Learn more
  • Flexible & composable: Chakra UI components are built on top of a React UI Primitive for endless composability.
  • Accessible. Chakra UI components follow the WAI-ARIA guidelines specifications and have the right aria-* attributes.
  • Dark Mode 😍: Most components in Chakra UI are dark mode compatible.

Installation

To use Chakra UI components, all you need to do is install the @chakra-ui/react package and its peer dependencies:

# with Yarn
$ yarn add @chakra-ui/react @emotion/react

# with npm
$ npm i @chakra-ui/react @emotion/react

# with pnpm
$ pnpm add @chakra-ui/react @emotion/react

# with Bun
$ bun add @chakra-ui/react @emotion/react

Usage

To start using the components, please follow these steps:

  1. Wrap your application with the ChakraProvider provided by @chakra-ui/react.
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"

// Do this at the root of your application
function App({ children }) {
  return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
}

Optionally, you can wrap your application with the ColorModeProvider so you can toggle between light and dark mode within your app.

  1. Now you can start using components like so!:
import { Button } from "@chakra-ui/react"

function Example() {
  return <Button>I just consumed some ⚡️Chakra!</Button>
}

More guides on how to get started are available here

CodeSandbox Templates

create-react-app Templates

Check out our guide for information on how to use our official create-react-app templates.

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

Our docsite lives in a separate repo. If you're interested in contributing to the documentation, check out the docsite contribution guide.

Support Chakra UI

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Individuals

By donating $5 or more you can support the ongoing development of this project. We'll appreciate some support. Thank you to all our supporters! 🙏 [Contribute]

Testimonials

People throw React component libraries and design systems at me regularly. This might be the best one I've seen. The APIs are simple but composable and the accessibility on the couple components I looked is complete.

Great work @thesegunadebayo, really inspiring work. – Ryan Florence

Awesome new open-source component library from @thesegunadebayo. Really impressive stuff! – Colm Tuite

This is incredible work. Amazing job Segun! – Lee Robinson

Chakra UI is glorious! I love the consistent use of focus styling and the subtle animation – Guillermo ▲

Awards and Mentions

We've been extremely humbled to receive awards and mentions from the community for all the innovation and reach Chakra UI brings to the JavaScript ecosystem.

Technology Radar

Solution Worth Pursuing

Technology Radar (2020–2021)

Open Source Awards 2020

The Most Impactful Contribution to the community

Open Source Awards (2020)

Contributors

Thanks goes to these wonderful people

Segun Adebayo
Segun Adebayo

💻 🚧 📖 💡 🎨
Tioluwani Kolawole
Tioluwani Kolawole

📖 💡 🚧
Devansh Jethmalani
Devansh Jethmalani

💻
Adrian Aleixandre
Adrian Aleixandre

💻 📖
Lee
Lee

📖
Kristóf Poduszló
Kristóf Poduszló

💻 🤔 🐛 📖
Justin Hall
Justin Hall

💻
Mark Chandler
Mark Chandler

💻 ⚠️ 📖 🚧
Folasade Agbaje
Folasade Agbaje

💻 🤔
Christian Nwamba
Christian Nwamba

📖
Jonathan Bakebwa
Jonathan Bakebwa

📖 🤔
Alex Luong
Alex Luong

💻 🔌
Jesco Wüster
Jesco Wüster

💻
Dusty Doris
Dusty Doris

💻
Alex Lobera
Alex Lobera

💻
Tommaso De Rossi
Tommaso De Rossi

💻
Odi
Odi

💻
Hendrik Niemann
Hendrik Niemann

💻
Matt Rothenberg
Matt Rothenberg

💻 💡
Luis Felipe Zaguini
Luis Felipe Zaguini

💻
Jean
Jean

💻
Temitope Ajiboye
Temitope Ajiboye

📖
Jonathan Kim
Jonathan Kim

💻
Chris Thompson
Chris Thompson

💻
WALTER KIMARO
WALTER KIMARO

💻
Jack Leslie
Jack Leslie

💻
Ken-Lauren Daganio
Ken-Lauren Daganio

💻
Ramon
Ramon

💻
jess
jess

📖 🔍
Ayelegun Kayode Michael
Ayelegun Kayode Michael

💻
Tal Williams
Tal Williams

💻
Trevor Blades
Trevor Blades

💻 📖 🐛
Gord Lea
Gord Lea

💻
Aggelos Arvanitakis
Aggelos Arvanitakis

💻
Douglas Gabriel
Douglas Gabriel

💻
Martin Nordström
Martin Nordström

💻
Danny Tatom
Danny Tatom

💻
Simon Collins
Simon Collins

💻
Santi Albo
Santi Albo

💻 📖
PILO7980
PILO7980

💻
Ishimoto Koji
Ishimoto Koji

💻
Jeff Wen
Jeff Wen

💻
Pablo Saez
Pablo Saez

💻
Nejc Ravnik
Nejc Ravnik

💻
Julien Viala
Julien Viala

💻
Sebastian Trebunak
Sebastian Trebunak

💻 📖
Adam Plante
Adam Plante

💻
Lúcio Rubens
Lúcio Rubens

💻
Jason Miazga
Jason Miazga

💻 📖
Gonzalo Pozzo
Gonzalo Pozzo

💻
Christian
Christian

💻 🚇
Christian Hagendorn
Christian Hagendorn

💻
Andrey Krasnov
Andrey Krasnov

💻
Dony Sukardi
Dony Sukardi

💻
Meng
Meng

💻
Gabriele Belluardo
Gabriele Belluardo

💻
Francois Best
Francois Best

💻
Tianci He
Tianci He

💻
Steven
Steven

💻
Baptiste Adrien
Baptiste Adrien

💻
Rob Bevan
Rob Bevan

💻
Tomasz
Tomasz

💻
徐愷
徐愷

💻
David Wippel
David Wippel

💻
Naveen
Naveen

💻
Vincent
Vincent

💻
Osamah Aldoaiss
Osamah Aldoaiss

💻
Fred K. Schott
Fred K. Schott

💻
Jared Palmer
Jared Palmer

💻
Austin Walela
Austin Walela

💻
Tony Narlock
Tony Narlock

💻 📖
Thomas Maximini
Thomas Maximini

💻
David Baumgold
David Baumgold

💻
ralphilius
ralphilius

💻
Rahul Rangnekar
Rahul Rangnekar

💻
Pierre Nel
Pierre Nel

💻
Pierre Grimaud
Pierre Grimaud

💻
Whisp R&D
Whisp R&D

💻
Makenna Smutz
Makenna Smutz

💻 📖 🤔
Nelson Reitz
Nelson Reitz

💻
Mohamed Nainar
Mohamed Nainar

📖
Mustafa Turhan
Mustafa Turhan

📖
Kim Røen
Kim Røen

📖
Justin Mak
Justin Mak

💻
Jeremy Davis
Jeremy Davis

💻
Jeremy Lu
Jeremy Lu

📖 💻
Ivan Dalmet
Ivan Dalmet

📖 💻 🔌
Dillon Curry
Dillon Curry

💻
idfunctor
idfunctor

💻
denkigai
denkigai

💻
Aaron Adams
Aaron Adams

💻
Abdulazeez Adeshina
Abdulazeez Adeshina

💻
Sandro
Sandro

💻
Premkumar Shanmugam
Premkumar Shanmugam

💻
Tobias Meixner
Tobias Meixner

💻
Jeremie Leblanc
Jeremie Leblanc

💻
Kelvin Oghenerhoro
Kelvin Oghenerhoro

💻
David J. Felix
David J. Felix

💻
Brody McKee
Brody McKee

📖
Per Svensson
Per Svensson

💻
Patrick Cason
Patrick Cason

📖
Ivo Ilić
Ivo Ilić

💻
Avaneesh Tripathi
Avaneesh Tripathi

💻
balibebas
balibebas

📖
Navin Moorthy
Navin Moorthy

💻 📖
Tim Kindberg
Tim Kindberg

📖
iodar
iodar

📖
MAO YUFENG
MAO YUFENG

📖
Peng Jie
Peng Jie

💻 📖
James Gee
James Gee

💻 ⚠️ 💡
Anton
Anton

📖
Damnjan Lukovic
Damnjan Lukovic

📖
Stanila Andrei
Stanila Andrei

💻
Ekunola Ezekiel
Ekunola Ezekiel

💻
Ben Mitchinson
Ben Mitchinson

📖
Jess Telford
Jess Telford

💻
Simo Aleksandrov
Simo Aleksandrov

📖
Héricles Emanuel
Héricles Emanuel

💻
CodinCat
CodinCat

📖
Sam Dawson
Sam Dawson

🤔
hy2k
hy2k

💻
Pierre Ortega
Pierre Ortega

💻
Kerem Sevencan
Kerem Sevencan

📖
harveyhalwin
harveyhalwin

📖
Mansour benyoucef
Mansour benyoucef

📖
Andrew Garrison
Andrew Garrison

📖
Carlos Rodrigues
Carlos Rodrigues

📖
Dwight Watson
Dwight Watson

📖
ChasinHues
ChasinHues

📖
Nahuel Greco
Nahuel Greco

📆 🐛
Pablo Rocha
Pablo Rocha

📖
Dustin Larimer
Dustin Larimer

💻 🎨
Juliano Farias
Juliano Farias

📖
Joe Bell
Joe Bell

🐛 💻
Henning Pohlmeyer
Henning Pohlmeyer

💻
Sivert Schou Olsen
Sivert Schou Olsen

📖
Andrei Lazarescu
Andrei Lazarescu

📖
José Teixeira
José Teixeira

🐛
Adriano Resende
Adriano Resende

📖
Victor Bastos
Victor Bastos

📖
Vincent
Vincent

📖
Candice
Candice

🎨 🐛 📖
Dave Bauman
Dave Bauman

📖
TimKolberger
TimKolberger

🐛 📖 💻
Stephane Mensah
Stephane Mensah

🐛
iskanderbroere
iskanderbroere

📖
Dominik Sumer
Dominik Sumer

💻
Pavel 'Strajk' Dolecek
Pavel 'Strajk' Dolecek

📖
Keshav Bohra
Keshav Bohra

📖
okezieuc
okezieuc

📖
Clayton Faria
Clayton Faria

📖
Andrew Ellis
Andrew Ellis

💻 🐛 📖
Joel Gallant
Joel Gallant

🐛
Jaya Krishna Namburu
Jaya Krishna Namburu

💻
Ifeoma Imoh
Ifeoma Imoh

📖
Jason Adkison
Jason Adkison

🐛
Gauthier Rodaro
Gauthier Rodaro

🐛
Tom Dohnal
Tom Dohnal

💻
Sam Margalit
Sam Margalit

🐛
Marcus Wood
Marcus Wood

💻
Spencer Duball
Spencer Duball

📖
Jacob Arriola
Jacob Arriola

📖
Kenley Jean
Kenley Jean

📖
Dennis Morello
Dennis Morello

🐛
Umar Gora
Umar Gora

📖
Zyclotrop-j
Zyclotrop-j

💻
Hong Suk Woo
Hong Suk Woo

📖
Junho Yeo
Junho Yeo

📖
Thomas Siller
Thomas Siller

⚠️ 💻
Samuel Kauffmann
Samuel Kauffmann

📖
Jozef Mikuláš
Jozef Mikuláš

💻
João Victor
João Victor

💻
yuichiro miyamae
yuichiro miyamae

📖
Gifa Eriyanto
Gifa Eriyanto

🐛
Yuzi
Yuzi

⚠️ 💻
songheewon
songheewon

📖
Prasanna Venkatesh T S
Prasanna Venkatesh T S

📖
anthowm
anthowm

📖
Osama Ahmaro
Osama Ahmaro

🐛
Danan Wijaya
Danan Wijaya

📖
electather
electather

🐛
Shubham Kaushal
Shubham Kaushal

📖
Petter Sæther Moen
Petter Sæther Moen

📖
Herman Nygaard
Herman Nygaard

📖
jnmsl
jnmsl

📖
Mohamed Sayed
Mohamed Sayed

💻
Sam Poder
Sam Poder

📖
Dominic Lee
Dominic Lee

📖 💻
Feras Aloudah
Feras Aloudah

🤔
JP Ungaretti
JP Ungaretti

📖
Endika Intxaurtieta
Endika Intxaurtieta

📖
Matt Wells
Matt Wells

💻
Anant Jain
Anant Jain

📖
Tom Chen
Tom Chen

📖 🚇
Ernie Miranda
Ernie Miranda

📖
bjoluc
bjoluc

📖
Sujit Pradhan
Sujit Pradhan

📖 💻
Abhishek Kashyap
Abhishek Kashyap

📖
Kristian Djaković
Kristian Djaković

💻
Antoniel Magalhães
Antoniel Magalhães

💻
Griko Nibras
Griko Nibras

🤔 💻
imalbert
imalbert

📖
mcha
mcha

💻 ⚠️
Hasib Hassan
Hasib Hassan

📖
Jamie Rolfs
Jamie Rolfs

🤔 📖 💻
Surabhi Gupta
Surabhi Gupta

📖
Ningaro
Ningaro

🐛
Monae
Monae

💻
Wade McDaniel
Wade McDaniel

📖
Gordon Goldbach
Gordon Goldbach

💻
Bhish
Bhish

💻
Amilkar Munoz
Amilkar Munoz

📖
Samar Mohan
Samar Mohan

💻
João Paulo Rodrigues
João Paulo Rodrigues

📖
Avery Freeman
Avery Freeman

📖
Daniel Schulz
Daniel Schulz

🐛 💻 📖 🤔
Michael Kilbane
Michael Kilbane

💻
ngxCoder
ngxCoder

💻
Kristofer Giltvedt Selbekk
Kristofer Giltvedt Selbekk

📖
Johann Ehlers
Johann Ehlers

📖 💻
Lukas Bach
Lukas Bach

💻
Lazar Nikolov
Lazar Nikolov

🐛
iwata
iwata

🐛 💻
Lee seung chan
Lee seung chan

💻
pomSense
pomSense

💻
be-student
be-student

📖
Tatsuya Itakura
Tatsuya Itakura

💻 🚧
Yuku Kotani
Yuku Kotani

💻 🚧
Vadim Demedes
Vadim Demedes

💻

(emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Testing supported by

BrowserStack

License

MIT © Segun Adebayo

NPM DownloadsLast 30 Days