CSS 프레임워크 - Chakra (차크라)

Chakra

Chakra (이하 차크라)는 TypeScript로 만들어진 UI 프레임워크다. 오리엔탈적인 이름이 특이한데, Segun Adebayo라는 두바이 사람이 만 만들었다. 검색을 해보면 정보가 정말 없는 걸로 봐서는 사용률이 높진 않은 것 같은데, 문서는 아주 잘 정리되어 있다. 대부분의 컴포넌트들이 다크 모드가 호환되기 때문에 다크 모드를 구현하기 수월하다고 한다. 단, date picker, autocomplete, table과 같은 중요한 컴포넌트들이 없어서 커뮤니티에서 불만이 있는 것 같다. 컴포넌트 수로는 Material UI가 우위에 있는 듯.

 

차크라 로고

 

사용하기

1. 설치

// npm 사용시
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

// yarn 사용시
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

 

2. Provider 설정

Chakra를 사용하려면 앱의 root 파일에서 컴포넌트를 ChakraProvider로 씌워줘야 한다.

import * as React from 'react'

// 1. `ChakraProvider` 컴포넌트 불러오기
import { ChakraProvider } from '@chakra-ui/react'

function App({ Component }) {
  // 2. root app에 씌우기
  return (
    <ChakraProvider>
      <Component />
    </ChakraProvider>
  )
}

 

3. 예시 1: 테마 커스터마이징

// 1. `extendTheme` 불러오기
import { extendTheme } from "@chakra-ui/react"

// 2. `extendTheme` 적용하기
const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7fafc",
      // ...
      900: "#1a202c",
    },
  },
})

// 3. `ChakraProvider`에 테마 적용
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

// 4. 컴포넌트에서 커스텀 스타일 사용
function Usage() {
  return <Box bg="brand.100">Welcome</Box>
}

 

4. 예시 1: 버튼

import { Button, ButtonGroup } from '@chakra-ui/react'

<Stack direction='row' spacing={4} align='center'>
  <Button colorScheme='teal' variant='solid'>
    Button
  </Button>
  <Button colorScheme='teal' variant='outline'>  // variant로 스타일 변경
    Button
  </Button>
  <Button colorScheme='teal' size='xs'>  // 사이즈 조절
    Button
  </Button>
  <Button
    isLoading  // 로딩 중인 버튼
    loadingText='Submitting'
    colorScheme='teal'
    variant='outline'
  >
    Submit
  </Button>
</Stack>

 

 

공식 문서

https://chakra-ui.com/

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

https://github.com/chakra-ui/chakra-ui/

GitHub - chakra-ui/chakra-ui: ⚡️ Simple, Modular & Accessible UI Components for your React Applications