Getting started

PAI Design를 처음 붙일 때 필요한 최소 구성을 소개해요. @pai-design/react를 사용해 바로 컴포넌트를 렌더하는 흐름을 기준으로 설명해요. 토큰이나 레시피를 직접 조합해야 하는 경우가 아니라면 이 문서부터 시작하면 돼요.

설치하기

현재 PAI Design 패키지는 아직 publish 전이라 저장소 바깥에서 바로 설치할 수 없어요. package publish 이후 외부 설치 흐름을 별도로 안내할 예정이에요.

스타일 한 번만 불러오기

@pai-design/react/styles.css에는 토큰과 레시피 스타일이 함께 들어 있어요. 앱의 진입점에서 한 번만 import하면 돼요.

import "@pai-design/react/styles.css";

보통은 main.tsx, app/layout.tsx, pages/_app.tsx처럼 앱 전체에 적용되는 파일에서 불러와요. @pai-design/react를 사용한다면 @pai-design/tokens/styles.css와 @pai-design/recipes/styles.css를 따로 import할 필요는 없어요. font 상속과 CSS variable 연결 방식은 Styling Integration에서 자세히 다뤄요.

첫 컴포넌트 렌더하기

필요한 컴포넌트는 @pai-design/react에서 바로 import해요.

import "@pai-design/react/styles.css";
import { Button } from "@pai-design/react";

export function App() {
  return <Button>저장하기</Button>;
}

현재 문서에서는 Button, Dialog, AlertDialog, HelpBubble를 공개 API 기준으로 안내해요. 어떤 overlay를 써야 할지 헷갈린다면 각 컴포넌트 문서를 먼저 비교해보세요.

Dark mode 연결하기

PAI Design은 ThemeProvider를 제공하지 않아요. 대신 .dark와 .light 클래스를 기준으로 theme token을 바꾸는 contract를 제공해요. 빠르게 붙일 때는 조상 요소에 .dark를 두면 돼요.

import "@pai-design/react/styles.css";
import { Button } from "@pai-design/react";

export function App() {
  return (
    <div className="dark">
      <Button>저장하기</Button>
    </div>
  );
}

기본값은 light theme예요. 보통은 html이나 앱 루트 컨테이너에 .dark를 두고, 화면 일부만 다른 theme로 보여주고 싶다면 그 영역의 래퍼에만 .dark 또는 .light를 둘 수 있어요. theme 상태 저장, next-themes 연결, font와 CSS variable 사용 방식은 Styling Integration에서 자세히 볼 수 있어요.

다음에 읽으면 좋은 문서

• token 구조와 layer 기준은 Design Token에서 확인해요.
• 앱의 theme, CSS, Tailwind 연결 방식은 Styling Integration에서 확인해요.
• 공통 접근성 규칙과 문구 기준은 Accessibility & Content에서 확인해요.
• 컴포넌트별 사용 기준과 예시는 Components에서 볼 수 있어요.
• overlay를 언제 나눠 써야 하는지는 Overlay patterns에서 비교해볼 수 있어요.
• 색상 기준은 Color에서 확인해요.
• 간격 기준은 Spacing에서 확인해요.
• 텍스트 조합과 scale은 Typography에서 확인해요.