A Quick description of the component


Keywords
use-update-effect, a11y, accessible, ark-ui, chakra-ui, component, css-in-js, dark-mode, design-system, react, react-components, reactjs, styled, ui-components, ui-library, uikit, wai-aria
License
MIT
Install
npm install @chakra-ui/react-use-update-effect@2.1.0

Documentation

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