Getting started

Getting started (시작하기)

Radix Themes를 설치하고 몇 분 만에 빌드를 시작하는 방법이에요.

출처: 문서

본문

Radix Themes는 최소한의 설정으로 바로 사용할 수 있도록 설계된 프리-스타일드(pre-styled) 컴포넌트 라이브러리예요. 스타일이 없는 컴포넌트를 찾고 있다면 Radix Primitives를 참고해 주세요.

설치 (Installation)

시작하고 실행하는 건 빠르고 쉬워요.

1. Radix Themes 설치

패키지를 명령줄에서 설치해 주세요.

npm install @radix-ui/themes

2. CSS 파일 가져오기

앱의 루트에서 전역 CSS 파일을 import해 주세요.

import "@radix-ui/themes/styles.css";

3. Theme 컴포넌트 추가

body 안의 루트 컴포넌트를 감싸도록 앱에 Theme을 추가해 주세요.

import { Theme } from "@radix-ui/themes";

export default function () {
  return (
    <html>
      <body>
        <Theme>
          <MyApp />
        </Theme>
      </body>
    </html>
  );
}

4. 빌드 시작

이제 Radix Themes 컴포넌트를 사용할 준비가 됐어요.

import { Flex, Text, Button } from "@radix-ui/themes";

export default function MyApp() {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Radix Themes :)</Text>

      <Button>Let's go</Button>
    </Flex>
  );
}

테마 커스터마이징 (Customizing your theme)

설정은 Theme 컴포넌트를 통해 관리되고 적용돼요.

기본 설정 (Basic configuration)

Theme에 설정을 전달해 appearance를 커스터마이징할 수 있어요.

<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
  <MyApp />
</Theme>

테마 패널 사용 (Using the theme panel)

ThemePanel은 테마를 실시간으로 미리 볼 수 있게 해 주는 즉시 사용 가능한(drop-in) 컴포넌트예요. 실제 동작은 component playground에서 확인할 수 있어요.

앱에 ThemePanel을 추가하려면 패키지에서 import해서 루트 Theme 안에 넣어 주세요.

import { Theme, ThemePanel } from "@radix-ui/themes";

export default function () {
  return (
    <Theme>
      <MyApp />

      <ThemePanel />
    </Theme>
  );
}

더 나아가기 (Take it further)

Radix Themes를 최대한 활용하려면 더 많은 개념과 기능을 살펴보세요.

Styling

Radix Themes로 스타일링과 오버라이드에 접근하는 방법을 알아보세요.

Layout

레이아웃 프리미티브와 사용 가능한 속성들을 알아보세요.

Theme overview

테마의 구조와 앱을 위한 완벽한 스타일을 만드는 방법.

Color

색상 시스템과 테마에서의 적용을 이해하세요.

Dark mode

appearance를 사용해 멋진 다크 모드를 앱에 통합하세요.

Typography

커스텀 서체를 추가하고 타이포그래피 세부를 세밀하게 조정하세요.

더 알아보기 (Learn more)

설치는 npm install @radix-ui/themes와 CSS import, 루트 Theme 래핑 세 단계로 끝나요.