Chakra UI é uma biblioteca abrangente de componentes React acessíveis, reutilizáveis e combináveis que agiliza o desenvolvimento de aplicativos web e sites modernos. A biblioteca oferece uma ampla gama de componentes que podem ser facilmente combinados para construir interfaces de usuário complexas, ao mesmo tempo que segue as práticas recomendadas de acessibilidade.
create-react-app
É o site https://chakra-ui.com para a versão mais recente do Chakra UI. Para versões mais antigas, clique aqui
Box
e Stack
que facilitam o estilo de seus componentes passando acessórios. Saber maisaria-*
corretos. Para usar os componentes Chakra UI, tudo que você precisa fazer é instalar o pacote @chakra-ui/react
e suas dependências de pares:
# 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
Para começar a usar os componentes, siga estas etapas:
ChakraProvider
fornecido por @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 >
}
Opcionalmente, você pode agrupar seu aplicativo com o ColorModeProvider
para poder alternar entre os modos claro e escuro em seu aplicativo.
import { Button } from "@chakra-ui/react"
function Example ( ) {
return < Button > I just consumed some ⚡️Chakra! < / Button >
}
Mais guias sobre como começar estão disponíveis aqui
create-react-app
Confira nosso guia para obter informações sobre como usar nossos modelos oficiais create-react-app
.
Quer contribuir? Isso é incrível! Temos um guia de contribuição para ajudar a orientá-lo.
Nosso docsite reside em um repositório separado. Se você estiver interessado em contribuir com a documentação, confira o guia de contribuição do docsite.
Apoie este projeto com sua organização. Seu logotipo aparecerá aqui com um link para seu site. [Contribuir]
Ao doar US$ 5 ou mais você pode apoiar o desenvolvimento contínuo deste projeto. Agradecemos algum apoio. Obrigado a todos os nossos apoiadores! [Contribuir]
As pessoas lançam bibliotecas de componentes React e sistemas de design para mim regularmente. Este pode ser o melhor que já vi. As APIs são simples, mas combináveis, e a acessibilidade dos dois componentes que observei é completa.
Ótimo trabalho @thesegunadebayo, trabalho realmente inspirador. –Ryan Florence
Nova e incrível biblioteca de componentes de código aberto de @thesegunadebayo. Coisas realmente impressionantes! –Colm Tuite
Este é um trabalho incrível. Trabalho incrível Segun! –Lee Robinson
A interface do Chakra é gloriosa! Adoro o uso consistente do estilo de foco e da animação sutil – Guillermo ▲
Ficamos extremamente honrados ao receber prêmios e menções da comunidade por toda a inovação e alcance que o Chakra UI traz ao ecossistema JavaScript.
Solução que vale a pena buscarRadar tecnológico (2020–2021) | |
A contribuição mais impactante para a comunidadePrêmios de código aberto (2020) |
Obrigado vai para essas pessoas maravilhosas
Segun Adebayo ? ? | Tioluwani Kolawole ? | Devansh Jetmalani | Adriano Aleixandre | Lee | Kristóf Poduszló ? ? | Justin Salão |
Marcos Chandler | Folasade Agbaje ? | Christian Nwamba | Jonathan Bakebwa ? | Alex Luong ? | Jesco Wuster | Dóris empoeirada |
Alex Lobera | Tomaso De Rossi | Odi | Hendrik Niemann | Matt Rothenberg | Luis Felipe Zaguini | João |
Temitope Ajiboye | JonathanKim | Chris Thompson | WALTER KIMARO | Jack Leslie | Ken-Lauren Daganio | Ramón |
Jess ? | Ayelegun Kayode Michael | Tal Williams | Lâminas de Trevor ? | Gord Lea | Aggelos Arvanitakis | Douglas Gabriel |
Martin Nordstrom | Danny Tatom | Simon Collins | Santo Albo | PILO7980 | Ishimoto Koji | Jeff Wen |
Pablo Saez | Nejc Ravnik | Julien Viala | Sebastian Trebunak | Adam Plante | Lúcio Rubens | Jason Miazga |
Gonzalo Pozzo | cristão ? | Christian Hagendorn | Andrey Krasnov | Dony Sukardi | Meng | Gabriele Belluardo |
François Melhor | Tianci Ele | Steven | Baptiste Adriano | Rob Bevan | Tomasz | 徐愷 |
David Wipel | Naveen | Vicente | Osamah Aldoaiss | Fred K. Schott | Jared Palmer | Austin Walela |
Tony Narlock | Thomas Maximini | David Baumgold | Ralfílio | Rahul Rangnekar | Pierre Nel | Pedro Grimaud |
Pesquisa e Desenvolvimento de Whisp | Makenna Smutz ? | Nelson Reitz | Mohamed Nainar | Mustafá Turhan | Kim Røen | Justin Mak |
Jeremy Davis | Jeremy Lu | Ivan Dalmet ? | Dillon Curry | idfunctor | denkigai | Aaron Adams |
Abdulazeez Adeshina | Sandro | Premkumar Shanmugam | Tobias Meixner | Jeremie Leblanc | Kelvin Oghenerhoro | David J. Félix |
Brody McKee | Por Svensson | Patrick Cason | Ivo Ilić | Avaneesh Tripathi | balibebas | Navin Moorthy |
Tim Kindberg | iodar | MAO YUFENG | Peng Jie | James Gee | Anton | Damjan Lukovic |
Stanila Andrei | Ekunola Ezequiel | Ben Mitchinson | Jess Telford | Simo Aleksandrov | Héricles Emanuel | CodinCat |
Sam Dawson ? | hi2k | Pedro Ortega | Kerem Sevencan | Harvey Halwin | Mansour Benyoucef | André Garrison |
Carlos Rodrigues | Dwight Watson | ChasinHues | Nahuel Greco ? ? | Paulo Rocha | Dustin Larimer ? | Juliano Farias |
Joe Bell ? | Henning Pohlmeyer | Sivert Schou Olsen | Andrei Lazarescu | Jose Teixeira ? | Adriano Resende | Victor Bastos |
Vicente | Candice ? ? | David Bauman | Tim Kolberger ? | Stéphane Mensah ? | iskanderbroere | Dominic Sumer |
Pavel 'Strajk' Dolecek | Keshav Bohra | okezieuc | Clayton Faria | André Ellis ? | Joel Galante ? | Jaya Krishna Namburu |
Ifeoma Imoh | Jason Adkison ? | Gauthier Rodaro ? | Tom Dohnal | Sam Margalit ? | Marcos Madeira | Spencer Duball |
Jacob Arriola | Kenley Jean | Dennis Morello ? | Umar Gora | Ziclotrop-j | Hong Suk Woo | Junho Yeo |
Thomas Siller | Samuel Kauffmann | Jozef Mikuláš | João Vitor | Yuichiro Miyamae | Gifa Eriyanto ? | Yuzi |
Songheewon | Prasanna Venkatesh TS | hino | Osama Ahmaro ? | Danan Wijaya | eletricista ? | Shubham Kaushal |
Petter Sæther Moen | Herman Nygaard | jnmsl | Mohammed Sayed | Sam Poder | Dominic Lee | Feras Aloudah ? |
JP Ungaretti | Endika Intxaurtieta | Matt Wells | Anant Jain | Tom Chen ? | Ernesto Miranda | bjoluc |
Sujit Pradhan | Abhishek Kashyap | Kristian Djaković | Antonio Magalhães | Griko Nibras ? | imalberto | mcha |
Hasib Hassan | Jamie Rolfs ? | Surabhi Gupta | Ningarô ? | Monae | Wade McDaniel | Gordon Goldbach |
Bhish | Amilkar Muñoz | Samar Mohan | João Paulo Rodrigues | Avery Freeman | Daniel Schultz ? ? | Michael Kilbane |
ngxCoder | Kristofer Giltvedt Selbekk | Johann Ehlers | Lucas Bach | Lázar Nikolov ? | Iwata ? | Lee seung-chan |
pomSense | ser estudante | Tatsuya Itakura ? | Yuku Kotani ? | Vadim Demedes |
(chave emoji):
Este projeto segue a especificação de todos os contribuidores. Contribuições de qualquer tipo são bem-vindas!
MIT © Segun Adebayo