Chakra UI adalah perpustakaan lengkap komponen React yang dapat diakses, digunakan kembali, dan dapat disusun yang menyederhanakan pengembangan aplikasi web dan situs web modern. Perpustakaan ini menawarkan beragam komponen yang dapat dengan mudah digabungkan untuk membangun antarmuka pengguna yang kompleks sambil tetap mengikuti praktik terbaik aksesibilitas.
create-react-app
Ini adalah situs web https://chakra-ui.com untuk versi terbaru Chakra UI. Untuk versi yang lebih lama, buka di sini
Box
dan Stack
yang memudahkan penataan gaya komponen Anda dengan meneruskan alat peraga. Pelajari lebih lanjutaria-*
yang tepat. Untuk menggunakan komponen Chakra UI, yang perlu Anda lakukan hanyalah menginstal paket @chakra-ui/react
dan dependensi rekannya:
# 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
Untuk mulai menggunakan komponen, ikuti langkah-langkah berikut:
ChakraProvider
yang disediakan oleh @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 >
}
Secara opsional, Anda dapat menggabungkan aplikasi Anda dengan ColorModeProvider
sehingga Anda dapat beralih antara mode terang dan gelap dalam aplikasi Anda.
import { Button } from "@chakra-ui/react"
function Example ( ) {
return < Button > I just consumed some ⚡️Chakra! < / Button >
}
Panduan lebih lanjut tentang cara memulai tersedia di sini
create-react-app
Lihat panduan kami untuk informasi tentang cara menggunakan templat create-react-app
resmi kami.
Merasa ingin berkontribusi? Itu luar biasa! Kami memiliki panduan kontribusi untuk membantu memandu Anda.
Situs dokumen kami berada di repo terpisah. Jika Anda tertarik untuk berkontribusi pada dokumentasi, lihat panduan kontribusi situs dokumen.
Dukung proyek ini dengan organisasi Anda. Logo Anda akan muncul di sini dengan tautan ke situs web Anda. [Menyumbang]
Dengan mendonasikan $5 atau lebih, Anda dapat mendukung pengembangan berkelanjutan proyek ini. Kami akan menghargai dukungannya. Terima kasih kepada semua pendukung kami! [Menyumbang]
Orang-orang sering melemparkan pustaka komponen React dan sistem desain kepada saya. Ini mungkin yang terbaik yang pernah saya lihat. APInya sederhana namun dapat disusun dan aksesibilitas pada beberapa komponen yang saya lihat sudah lengkap.
Kerja bagus @thesegunadebayo, karya yang sungguh menginspirasi. – Ryan Firenze
Pustaka komponen sumber terbuka baru yang mengagumkan dari @thesegunadebayo. Hal yang sangat mengesankan! – Colm Tuite
Ini adalah pekerjaan yang luar biasa. Pekerjaan luar biasa Segun! –Lee Robinson
UI Chakra luar biasa! Saya menyukai penggunaan gaya fokus yang konsisten dan animasi yang halus – Guillermo ▲
Kami dengan rendah hati menerima penghargaan dan sebutan dari komunitas atas semua inovasi dan jangkauan yang dibawa Chakra UI ke ekosistem JavaScript.
Solusi yang Layak DikejarRadar Teknologi (2020–2021) | |
Kontribusi Paling Berdampak pada MasyarakatPenghargaan Sumber Terbuka (2020) |
Terima kasih ditujukan kepada orang-orang hebat ini
Segun Adebayo ? ? | Tioluwani Kolawole ? | Devansh Jethmalani | Adrian Aleixandre | Lee | Kristóf Poduszlo ? ? | Justin Hall |
Tandai Chandler | Folasade Agbaje ? | Christian Nwamba | Jonathan Bakebwa ? | Alex Luong ? | Jesco Wuster | Doris yang berdebu |
Alex Lobera | Tommaso De Rossi | Odi | Hendrik Niemann | Matt Rothenberg | Luis Felipe Zaguini | Jean |
Temitope Ajiboye | Jonatan Kim | Chris Thompson | WALTER KIMARO | Jack Leslie | Ken-Lauren Daganio | Ramon |
yesus ? | Ayelegun Kayode Michael | Tal Williams | Pisau Trevor ? | Ya Tuhan Lea | Aggelos Arvanitakis | Douglas Gabriel |
Martin Nordstrom | Danny Tatom | Simon Collins | Santi Albo | PILO7980 | Ishimoto Koji | Jeff Wen |
Pablo Saez | Nejc Ravnik | Julien Viala | Sebastian Trebunak | Adam Plante | Lucio Rubens | Jason Miazga |
Gonzalo Pozzo | Kristen ? | Christian Hagendorn | Andrey Krasnov | Dony Sukardi | Meng | Gabriele Belluardo |
Francois Terbaik | Tianci Dia | Steven | Baptiste Adrien | Rob Bevan | Tomasz | 徐愷 |
David Wippel | Naveen | Vinsensius | Osamah Aldoaiss | Fred K. Schott | Jared Palmer | Austin Walela |
Tony Narlock | Thomas Maximini | David Baumgold | ralphilius | Rahul Rangnekar | Pierre Nel | Pierre Grimaud |
Penelitian & Pengembangan Whisp | Makenna Smutz ? | Nelson Reitz | Mohamed Nainar | Mustafa Turhan | Kim Roen | Justin Mak |
Jeremy Davis | Jeremy Lu | Ivan Dalmet ? | Kari Dillon | idfunctor | denkigai | Harun Adams |
Abdulazeez Adeshina | Sandro | Premkumar Shanmugam | Tobias Meixner | Jeremie Leblanc | Kelvin Oghenerhoro | David J.Felix |
Brody McKee | Menurut Svensson | Patrick Cason | Ivo Ilić | Avaneesh Tripathi | balibebas | Navin Moorthy |
Tim Kindberg | iodar | MAO YUFENG | Peng Jie | James Gee | anton | Sialan Lukovic |
Stanila Andrey | Ekunola Yehezkiel | Ben Mitchinson | Jess Telford | Simo Aleksandrov | Héricles Emanuel | CodinCat |
Sam Dawson ? | hy2k | Pierre Ortega | Kerem Sevencan | harveyhalwin | Mansour Benyoucef | Andrew Garnisun |
Carlos Rodrigues | Dwight Watson | ChasinHues | Nahuel Yunani ? ? | Pablo Rocha | Dustin Larimer ? | Juliano Farias |
Joe Bell ? | Henning Pohlmeyer | Sivert Schou Olsen | Andrey Lazarescu | José Teixeira ? | Adriano Resende | Victor Bastos |
Vinsensius | Candice ? ? | Dave Bauman | TimKolberger ? | Stephane Mensah ? | iskanderbroere | Dominik Sumeria |
Pavel 'Strajk' Dolecek | Keshav Bohra | okezieuc | Clayton Faria | Andrew Ellis ? | Joel gagah ? | Jaya Krishna Namburu |
Ifeoma Imoh | Jason Adkison ? | Gauthier Rodaro ? | Tom Dohnal | Sam Margalit ? | Marcus Kayu | Spencer Duball |
Yakub Arriola | Kenley Jean | Dennis Morello ? | Umar Gora | Zyclotrop-j | Hong Suk Woo | Junho Yeo |
Thomas Siller | Samuel Kauffmann | Jozef Mikuláš | João Victor | yuichiro miyamae | Gifa Eriyanto ? | Yuzi |
laguheewon | Prasanna Venkatesh TS | anthowm | Osama Ahmaro ? | Danan Wijaya | pemilih ? | Shubham Kaushal |
Petter Sæther Moen | Herman Nygaard | jnmsl | Muhammad Sayed | Sam Poder | Dominikus Lee | Feras Dengan Keras ? |
JP Ungaretti | Endika Intxaurtieta | Matt Wells | Anant Jain | Tom Chen ? | Ernie Miranda | bjoluc |
Sujit Pradhan | Abhishek Kashyap | Kristian Djakovic | Antoniel Magalhaes | Griko Nibra ? | imalbert | mcha |
Hasib Hasan | Jamie Rolfs ? | Surabhi Gupta | Ningaro ? | Monae | Wade McDaniel | Gordon Goldbach |
Bhis | Amilkar Munoz | Samar Mohan | João Paulo Rodrigues | Avery Freeman | Daniel Schulz ? ? | Michael Kilbane |
ngxCoder | Kristofer Giltvedt Selbekk | Johann Ehler | Lukas Bach | Lazar Nikolov ? | iwata ? | Lee Seungchan |
pomSense | menjadi pelajar | Tatsuya Itakura ? | Yuku Kotani ? | Vadim Demedes |
(kunci emoji):
Proyek ini mengikuti spesifikasi semua kontributor. Kontribusi apa pun diterima!
MIT © Segun Adebayo