Chakra UI est une bibliothèque complète de composants React accessibles, réutilisables et composables qui rationalise le développement d'applications Web et de sites Web modernes. La bibliothèque offre une gamme diversifiée de composants qui peuvent être facilement combinés pour créer des interfaces utilisateur complexes tout en respectant les meilleures pratiques en matière d'accessibilité.
create-react-app
Il s'agit du site Web https://chakra-ui.com pour la dernière version de Chakra UI. Pour les anciennes versions, rendez-vous ici
Box
et Stack
qui facilitent le style de vos composants en passant des accessoires. Apprendre encore plusaria-*
. Pour utiliser les composants Chakra UI, tout ce que vous avez à faire est d'installer le package @chakra-ui/react
et ses dépendances homologues :
# 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
Pour commencer à utiliser les composants, veuillez suivre ces étapes :
ChakraProvider
fourni par @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 >
}
En option, vous pouvez envelopper votre application avec ColorModeProvider
afin de pouvoir basculer entre les modes clair et sombre dans votre application.
import { Button } from "@chakra-ui/react"
function Example ( ) {
return < Button > I just consumed some ⚡️Chakra! < / Button >
}
Plus de guides sur la façon de démarrer sont disponibles ici
create-react-app
Consultez notre guide pour savoir comment utiliser nos modèles officiels create-react-app
.
Envie de contribuer ? C'est génial ! Nous avons un guide de contribution pour vous guider.
Notre docsite vit dans un dépôt séparé. Si vous souhaitez contribuer à la documentation, consultez le guide de contribution docsite.
Soutenez ce projet avec votre organisation. Votre logo apparaîtra ici avec un lien vers votre site Web. [Contribuer]
En faisant un don de 5 $ ou plus, vous pouvez soutenir le développement continu de ce projet. Nous apprécierons un peu de soutien. Merci à tous nos supporters ! [Contribuer]
Les gens me lancent régulièrement des bibliothèques de composants React et des systèmes de conception. C'est peut-être le meilleur que j'ai vu. Les API sont simples mais composables et l'accessibilité sur les quelques composants que j'ai regardés est complète.
Excellent travail @thesegunadebayo, travail vraiment inspirant. – Ryan Florence
Superbe nouvelle bibliothèque de composants open source de @thesegunadebayo. Des trucs vraiment impressionnants ! – Colm Tuite
C'est un travail incroyable. Travail incroyable Segun! – Lee Robinson
L'interface utilisateur de Chakra est glorieuse ! J'aime l'utilisation cohérente du style de mise au point et l'animation subtile – Guillermo ▲
Nous avons été extrêmement honorés de recevoir des prix et des mentions de la communauté pour toute l'innovation et la portée que Chakra UI apporte à l'écosystème JavaScript.
Une solution qui mérite d'être poursuivieRadar technologique (2020-2021) | |
La contribution la plus marquante à la communautéPrix Open Source (2020) |
Merci à ces gens merveilleux
Ségun Adebayo ? ? | Tioluwani Kolawole ? | Devansh Jethmalani | Adrien Alexandre | Lee | Kristof Poduszlo ? ? | Justin Hall |
Marc Chandler | Folasade Agbaje ? | Christian Nwamba | Jonathan Bakebwa ? | Alex Luong ? | Jesco Wüster | Doris poussiéreux |
Alex Lobéra | Tommaso De Rossi | Odi | Hendrik Niemann | Matt Rothenberg | Luis Felipe Zaguini | Jean |
Témitope Ajiboye | Jonathan Kim | Chris Thompson | WALTER KIMARO | Jack Leslie | Ken-Lauren Daganio | Ramón |
Jesse ? | Ayelegun Kayode Michael | Tal Williams | Lames de Trevor ? | Gord Léa | Aggelos Arvanitakis | Douglas-Gabriel |
Martin Nordstrom | Danny Tatom | Simon Collins | Saint Albo | PILO7980 | Ishimoto Koji | Jeff Wen |
Pablo Sáez | Nejc Ravnik | Julien Viala | Sébastien Trebunak | Adam Plante | Lucio Rubens | Jason Miazga |
Gonzalo Pozzo | chrétien ? | Christian Hagendorn | Andreï Krasnov | Dony Sukardi | Meng | Gabriele Belluardo |
François Meilleur | Tianci Il | Steven | Baptiste Adrien | Rob Bevan | Tomasz | 徐愷 |
David Wippel | Naveen | Vincent | Oussama Aldoaiss | Fred K. Schott | Jared Palmer | Austin Walela |
Tony Narlock | Thomas Maximini | David Baumgold | ralphilius | Rahul Rangnekar | Pierre Nel | Pierre Grimaud |
Fouet R&D | Makenna Smutz ? | Nelson Reitz | Mohamed Nainar | Mustafa Turhan | Kim Roen | Justin Mak |
Jérémy Davis | Jérémie Lu | Ivan Dalmet ? | Curry Dillon | fonction d'identification | denkigai | Aaron Adams |
Abdulazeez Adeshina | Sandro | Premkumar Shanmugam | Tobias Meixner | Jérémie Leblanc | Kelvin Oghenerhoro | David J. Félix |
Brody McKee | Par Svensson | Patrick Cason | Ivo Ilic | Avaneesh Tripathi | balibebas | Navin Moorthy |
Tim Kindberg | iode | MAO YUFENG | Peng Jie | James Gee | Anton | Damnjan Lukovic |
Stanila Andreï | Ekunola Ezéchiel | Ben Mitchinson | Jess Telford | Simo Alexandrov | Hériclès Emmanuel | CodinCat |
Sam Dawson ? | hy2k | Pierre Ortéga | Kerem Sevencan | Harvey Halwin | Mansour Benyoucef | Garnison Andrew |
Carlos Rodrigues | Dwight Watson | ChasinHues | Nahuel Greco ? ? | Pablo Rocha | Dustin Larimer ? | Juliano Farias |
Joe Bell ? | Henning Pohlmeyer | Sivert Schou Olsen | Andreï Lazarescu | José Teixeira ? | Adriano Resende | Victor Bastos |
Vincent | Candice ? ? | Dave Bauman | Tim Kolberger ? | Stéphane Mensah ? | Iskanderbroere | Dominique Sumer |
Pavel 'Strajk' Doleček | Keshav Bohra | okezieuc | Clayton Faria | Andrew Ellis ? | Joël Gallant ? | Jaya Krishna Namburu |
Ifeoma Imoh | Jason Adkison ? | Gauthier Rodaro ? | Tom Dohnal | Sam Margalit ? | Marcus Bois | Spencer Duball |
Jacob Arriola | Kenley Jean | Denis Morello ? | Oumar Gora | Zyclotrop-j | Hong Suk Woo | Junho Yeo |
Thomas Siller | Samuel Kauffmann | Jozef Mikulaš | João Victor | Yuichiro Miyamae | GIFA Eriyanto ? | Yuzi |
songheewon | Prasanna Venkatesh TS | hymne | Oussama Ahmaro ? | Danan Wijaya | cuir électrique ? | Shubham Kaushal |
Petter Sæther Moen | Herman Nygaard | jnmsl | Mohamed Sayed | Sam Poder | Dominique Lee | Féras Aloudah ? |
J.P. Ungaretti | Endika Intxaurtieta | Matt Wells | Anant Jain | Tom Chen ? | Ernie Miranda | bjoluc |
Sujit Pradhan | Abhishek Kashyap | Kristian Djaković | Antoniel Magalhães | Griko Nibras ? | imalbert | mcha |
Hasib Hassan | Jamie Rolfs ? | Surabhi Gupta | Ningaro ? | Monaé | Wade McDaniel | Gordon Goldbach |
Bish | Amilkar Muñoz | Samar Mohan | João Paulo Rodrigues | Avery Freeman | Daniel Schulz ? ? | Michael Kilbane |
ngxCoder | Kristofer Giltvedt Selbekk | Johann Ehlers | Lucas Bach | Lazare Nikolov ? | Iwata ? | Lee Seung Chan |
pomSense | être étudiant | Tatsuya Itakura ? | Yuku Kotani ? | Vadim Démède |
(clé emoji) :
Ce projet suit la spécification de tous les contributeurs. Les contributions de toute nature sont les bienvenues !
MIT © Segun Adebayo