본문으로 건너뛰기

설치

주의

차크라 UI 버전 2는 리액트 18과만 호환됩니다. 리액트 17 이하 버전을 사용해야 하는 경우 차크라 UI 버전 1을 사용하세요.

프로젝트에서 차크라 UI를 사용하려면 터미널에서 다음 명령을 실행합니다.

bash
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
bash
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

차크라 UI를 설치한 후, 앱의 루트에 ChakraProvider를 설정해야 합니다. 이 위치는 사용하는 프레임워크에 따라 index.jsx 또는 index.tsx 또는 App.jsx가 될 수 있습니다.

jsx
import * as React from 'react';
// 1. ChakraProvider 컴포넌트를 가져옵니다.
import { ChakraProvider } from '@chakra-ui/react';
function App() {
  // 2. 앱의 루트에서 ChakraProvider를 래핑합니다.
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  );
}
jsx
import * as React from 'react';
// 1. ChakraProvider 컴포넌트를 가져옵니다.
import { ChakraProvider } from '@chakra-ui/react';
function App() {
  // 2. 앱의 루트에서 ChakraProvider를 래핑합니다.
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  );
}

프레임워크 안내서​

차크라 UI를 원하는 프레임워크에서 사용할 수 있습니다. 다음 프레임워크에 대한 단계별 안내서를 준비했습니다.

다른 프레임워크는 원문을 확인하세요.