Chakra UI는 최신 웹 애플리케이션 및 웹 사이트 개발을 간소화하는 액세스 가능하고 재사용 가능하며 구성 가능한 React 구성 요소의 포괄적인 라이브러리입니다. 라이브러리는 접근성 모범 사례를 준수하면서 복잡한 사용자 인터페이스를 구축하기 위해 쉽게 결합할 수 있는 다양한 구성 요소를 제공합니다.
create-react-app
템플릿Chakra UI 최신 버전은 https://chakra-ui.com 웹사이트입니다. 이전 버전의 경우 여기로 가세요.
Box
및 Stack
과 같은 레이아웃 구성 요소 세트가 포함되어 있어 소품을 전달하여 구성 요소의 스타일을 쉽게 지정할 수 있습니다. 자세히 알아보기aria-*
속성을 갖습니다. Chakra UI 구성 요소를 사용하려면 @chakra-ui/react
패키지와 해당 피어 종속성을 설치하기만 하면 됩니다.
# 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
구성요소 사용을 시작하려면 다음 단계를 따르세요.
ChakraProvider
로 애플리케이션을 래핑하세요. import { ChakraProvider , defaultSystem } from "@chakra-ui/react"
// Do this at the root of your application
function App ( { children } ) {
return < ChakraProvider value = { defaultSystem } > { children } < / ChakraProvider >
}
선택적으로 ColorModeProvider
로 애플리케이션을 래핑하여 앱 내에서 밝은 모드와 어두운 모드 사이를 전환할 수 있습니다.
import { Button } from "@chakra-ui/react"
function Example ( ) {
return < Button > I just consumed some ⚡️Chakra! < / Button >
}
시작하는 방법에 대한 추가 가이드는 여기에서 확인할 수 있습니다.
create-react-app
템플릿 공식 create-react-app
템플릿을 사용하는 방법에 대한 정보는 가이드를 확인하세요.
기여하고 싶으신가요? 정말 대단해요! 우리는 당신을 안내하는 데 도움이 되는 기여 가이드를 가지고 있습니다.
우리 문서 사이트는 별도의 저장소에 있습니다. 문서에 기여하는 데 관심이 있다면 문서 사이트 기여 가이드를 확인하세요.
귀하의 조직과 함께 이 프로젝트를 지원하십시오. 귀하의 로고가 귀하의 웹사이트 링크와 함께 여기에 표시됩니다. [기여하다]
5달러 이상을 기부하면 이 프로젝트의 지속적인 개발을 지원할 수 있습니다. 우리는 약간의 지원을 부탁드립니다. 모든 지지자들에게 감사드립니다! [기여하다]
사람들은 정기적으로 나에게 React 구성 요소 라이브러리와 디자인 시스템을 던집니다. 이것은 내가 본 것 중 최고일지도 모릅니다. API는 간단하지만 구성 가능하며 제가 본 몇 가지 구성 요소에 대한 접근성은 완벽합니다.
훌륭한 작품 @thesegunadebayo, 정말 영감을 주는 작품입니다. – 라이언 플로렌스
@thesegunadebayo의 멋진 새 오픈 소스 구성 요소 라이브러리입니다. 정말 인상적인 내용이에요! – 콜름 투이트
이것은 놀라운 작업입니다. 정말 대단해요 세군! – 리 로빈슨
차크라 UI는 영광입니다! 일관된 포커스 스타일 사용과 섬세한 애니메이션이 마음에 듭니다 – Guillermo ▲
Chakra UI가 JavaScript 생태계에 가져온 모든 혁신과 도달 범위에 대해 커뮤니티로부터 상과 언급을 받게 되어 매우 겸손해졌습니다.
추구할 가치가 있는 솔루션기술 레이더(2020~2021) | |
지역사회에 가장 영향력 있는 기여오픈소스 어워드(2020) |
이 훌륭한 사람들에게 감사드립니다
세군 아데바요 ? ? | 티올루와니 콜라폴레 ? | 데반시 제스말라니 | 아드리안 알렉산드레 | 이씨 | 크리스토프 포두즐로 ? ? | 저스틴 홀 |
마크 챈들러 | 폴라사드 아그바제 ? | 크리스티안 느왐바 | 조나단 바케브와 ? | 알렉스 루옹 ? | 제스코 뷔스터 | 더스티 도리스 |
알렉스 로베라 | 토마소 데 로시 | 오디 | 헨드릭 니만 | 매트 로텐버그 | 루이스 펠리페 사기니 | 여자 이름 |
테미토페 아지보예 | 조나단 김 | 크리스 톰슨 | 월터 키마로 | 잭 레슬리 | 켄 로렌 다가니오 | 라몬 |
발목 끈 ? | 아예군 카요데 마이클 | 탈 윌리엄스 | 트레버 블레이드 ? | 고드 레아 | 아겔로스 아르바니타키스 | 더글라스 가브리엘 |
마틴 노드스트롬 | 대니 테이텀 | 사이먼 콜린스 | 산티 알보 | PILO7980 | 이시모토 코지 | 제프 웬 |
파블로 사에즈 | 네이치 라브닉 | 줄리앙 비알라 | 세바스티안 트레부낙 | 아담 플랜테 | 루시우 루벤스 | 제이슨 미아즈가 |
곤잘로 포조 | 신자 ? | 크리스티안 하겐돈 | 안드레이 크라스노프 | 도니 수카르디 | 멩 | 가브리엘레 벨루아르도 |
프랑수아 베스트 | 헤 티안치 | 스티븐 | 밥티스트 아드리앙 | 롭 베번 | 토마스 | 徐愷 |
데이비드 위펠 | 나빈 | 빈센트 | 오사마 알도아이스 | 프레드 K. 쇼트 | 자레드 팔머 | 오스틴 왈렐라 |
토니 날록 | 토마스 막시미니 | 데이비드 바움골드 | 랄필리우스 | 라훌 랑네카르 | 피에르 넬 | 피에르 그리모 |
위스프 연구개발 | 마켄나 스무츠 ? | 넬슨 라이츠 | 모하메드 나이나르 | 무스타파 투르한 | 킴 뢰엔 | 저스틴 맥 |
제레미 데이비스 | 제레미 루 | 이반 달메트 ? | 딜런 카레 | idfunctor | 덴키가이 | 아론 아담스 |
압둘라지즈 아데시나 | 산드로 | 프렘쿠마르 샨무감 | 토비아스 메이스너 | 제레미 르블랑 | 켈빈 오그너호로 | 데이비드 J. 펠릭스 |
브로디 맥키 | 스벤손 당 | 패트릭 케이슨 | 이보 일리치 | 아바니쉬 트리파티 | 발리베바 | 네빈 무티 |
팀 킨드버그 | 요다르 | 마오 유펑 | 펭 지에 | 제임스 지 | 안톤 | 담냔 루코비치 |
스타닐라 안드레이 | 에쿠놀라 에스겔 | 벤 미친슨 | 제스 텔포드 | 시모 알렉산드로프 | 에리클스 에마누엘 | 코디캣 |
샘 도슨 ? | hy2k | 피에르 오르테가 | 케렘 세븐칸 | 하비할윈 | 만수르 베뉴세프 | 앤드류 개리슨 |
카를로스 로드리게스 | 드와이트 왓슨 | ChasinHues | 나우엘 그레코 ? ? | 파블로 로차 | 더스틴 라리머 ? | 줄리아노 파리아스 |
조 벨 ? | 헤닝 폴메이어 | 시베르트 쇼우 올슨 | 안드레이 라자레스쿠 | 호세 테세이라 ? | 아드리아노 레센데 | 빅터 바스토스 |
빈센트 | 캔디스 ? ? | 데이브 바우만 | 팀콜베르거 ? | 스테판 멘사 ? | 이스칸데르브로에레 | 도미닉 수메르 |
파벨 '스트라이크' 돌레체크 | 케샤브 보라 | 오케지우크 | 클레이튼 파리아 | 앤드류 엘리스 ? | 조엘 갈란트 ? | 자야 크리슈나 남부루 |
이페오마 이모 | 제이슨 애드키슨 ? | 고티에 로다로 ? | 톰 도널 | 샘 마가리트 ? | 마커스 우드 | 스펜서 듀볼 |
제이콥 아리올라 | 켄리 진 | 데니스 모렐로 ? | 우마르 고라 | 자이클로트로프-j | 홍석우 | 여준호 |
토마스 실러 | 사무엘 카우프만 | 요제프 미쿨라쉬 | 주앙 빅터 | 미야마에 유이치로 | 기파 에리얀토 ? | 유지 |
송희원 | 프라사나 벤카테시 TS | 앤썸 | 오사마 아마로 ? | 다난 위자야 | 엘렉더 ? | 슈밤 카우샬 |
페터 세더 모엔 | 헤르만 나이가드 | jnmsl | 모하메드 사예드 | 샘 포더 | 도미닉 리 | 페라스 알루다 ? |
JP 운가레티 | 엔디카 인차우르티에타 | 매트 웰스 | 아난트 자인 | 톰 첸 ? | 어니 미란다 | 비요루크 |
수지트 프라단 | 아비셰크 카쉬얍 | 크리스티안 자코비치 | 안토니엘 마갈랴에스 | 그리코 니브라스 ? | 이말베르트 | 마차 |
하시브 하산 | 제이미 롤프스 ? | 수라비 굽타 | 닝가로 ? | 모네 | 웨이드 맥다니엘 | 고든 골드바흐 |
비쉬 | 아밀카르 무노즈 | 사마르 모한 | 주앙 파울루 로드리게스 | 에이버리 프리먼 | 다니엘 슐츠 ? ? | 마이클 킬베인 |
ngxCoder | 크리스토퍼 길트베트 셀베크 | 요한 엘러스 | 루카스 바흐 | 라자르 니콜로프 ? | 이와타 ? | 이승찬 |
폼센스 | 학생 | 이타쿠라 타츠야 ? | 코타니 유쿠 ? | 바딤 데메데스 |
(이모티콘 키):
이 프로젝트는 모든 기여자 사양을 따릅니다. 어떤 종류의 기여도 환영합니다!
MIT © 세군 아데바요