ScopulusUI 설치와 사용 방법

워크스페이스에 설치하기

이 저장소 안에서 워크스페이스로 씁니다. npm 에 발행하지 않습니다.

{
  "dependencies": {
    "@scopulus/ui": "workspace:*"
  }
}

디자인 토큰 불러오기

컴포넌트를 사용하기 전에 토큰 CSS를 불러와야 합니다. 색과 반경을 전부 CSS 변수에서 읽으므로, 변수가 없으면 컴포넌트에 색이 붙지 않습니다.

@import "tailwindcss";
@import "shadcn/tailwind.css";
@import "@scopulus/ui/tokens.css";

Tailwind에 라이브러리 경로 추가하기

Tailwind v4 의 자동 탐지는 node_modules 를 건너뜁니다. 워크스페이스 패키지가 거기 심볼릭 링크로 있어서, 이 줄이 없으면 라이브러리에서만 쓰는 클래스가 생성되지 않습니다. 오류도 경고도 나지 않습니다.

@source "../../../../packages/scopulus-ui/src";

컴포넌트 사용 예시

import { Button, Card, Badge } from "@scopulus/ui";

export function Example() {
  return (
    <Card href="/cases/token-store">
      <Badge>auth</Badge>
      <span className="text-lg font-medium">토큰 스토어의 레이스 컨디션</span>
    </Card>
  );
}

@scopulus/ui 가 공개 API 의 전부입니다. 내부 경로(@scopulus/ui/src/ui/button)를 직접 가져오면 파일을 옮기는 것이 파괴적 변경이 됩니다.

다크 모드 설정

.dark 클래스 하나로 전환합니다. 전환 장치는 앱이 정합니다.

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

ThemeToggle 이 이 프로바이더를 전제합니다. 그래서 next-themes 가 이 패키지의 peerDependencies 입니다.

앱 글꼴 설정

라이브러리는 --font-sans 를 읽기만 합니다. 글꼴 값은 앱에서 설정합니다.

:root {
  --font-sans: "Pretendard Variable", system-ui, sans-serif;
}

앱마다 브랜드에 맞는 서체를 선택할 수 있도록 했습니다. 라이브러리가 고정하면 쓰는 쪽이 자기 서체를 쓸 수 없습니다.