설치

pnpm이나 GitHub 설정 없이, 이 페이지에서 제공하는 패키지 URL로 바로 설치할 수 있어요.

간편 설치 (권장)

GitHub PAT·pnpm·별도 레지스트리 없이, 이 문서 사이트에서 패키지 파일을 직접 받아 설치할 수 있어요. 다른 서버에서는 아래 한 줄이면 됩니다.

npm install https://docs.goldtreedev.com/packages/goldtreedev-tokens-0.1.0.tgz https://docs.goldtreedev.com/packages/goldtreedev-ui-0.1.0.tgz https://docs.goldtreedev.com/packages/goldtreedev-icons-0.1.0.tgz

npm·yarn·pnpm 모두 동일하게 동작해요. pnpm을 쓰지 않아도 됩니다.

파일 직접 받기

@goldtreedev/tokens@0.1.0 (goldtreedev-tokens-0.1.0.tgz)
@goldtreedev/ui@0.1.0 (goldtreedev-ui-0.1.0.tgz)
@goldtreedev/icons@0.1.0 (goldtreedev-icons-0.1.0.tgz)

CSS만 CDN으로 쓰기

React 없이 토큰·컴포넌트 스타일만 맞추고 싶을 때는 URL import를 쓸 수 있어요. (컴포넌트 동작은 npm 설치가 필요해요.)

@import url("https://docs.goldtreedev.com/packages/css/theme.css");
@import url("https://docs.goldtreedev.com/packages/css/gtd-ui.css");

스타일 적용 (npm 설치 후)

Tailwind v4는 패키지 이름 CSS import를 못 풀 수 있어요. Next.js에서는 아래 중 하나를 쓰세요.

/* 권장: docs CDN */
@import url("https://docs.goldtreedev.com/packages/css/theme.css");
@import url("https://docs.goldtreedev.com/packages/css/gtd-ui.css");

/* 또는 node_modules 상대 경로 */
@import "../../node_modules/@goldtreedev/tokens/theme.css";
@import "../../node_modules/@goldtreedev/ui/styles/gtd-ui.css";

Next.js 설정

// next.config.ts
const nextConfig = {
  transpilePackages: ["@goldtreedev/ui"],
};
export default nextConfig;

컴포넌트 사용

import { Button, Table, Badge } from "@goldtreedev/ui";

export default function Page() {
  return <Button>저장</Button>;
}

아이콘

아이콘 이미지는 이 사이트 CDN으로 제공돼요. 별도 설치 없이 URL만 쓰면 됩니다.

import { getGtdFlatIconUrl } from "@goldtreedev/icons";

// 기본 CDN: https://docs.goldtreedev.com/app-icons/...
const src = getGtdFlatIconUrl("settings", "webp");

고급: GitHub Packages

CI에서 버전 고정이 필요하거나 조직 레지스트리를 쓰고 싶다면 GitHub Packages를 사용할 수 있어요. 일반적으로는 위 간편 설치로 충분해요.