Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Chakra UI
The official Storybook Addon for Chakra UI
npm install @chakra-ui/storybook-addon
Last updated 5 months ago
55.7k
Downloads per week
Readme View on GitHub

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@^11 @emotion/styled@^11 framer-motion@^6

# with npm
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# with pnpm
$ pnpm add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# with Bun
$ bun add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Usage

To start using the components, please follow these steps:

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

// Do this at the root of your application
function App({ children }) {
  return <ChakraProvider>{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

Join the community
6,561 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI