설치Installation

패키지 추가Add the packages

컴포넌트, 토큰, 아이콘을 함께 설치합니다. globals.css가 Tailwind CSS v4를 import하므로 tailwindcss도 필요하고, Vite에서는 @tailwindcss/vite 플러그인을 함께 넣습니다.Install the components, the tokens and the icons together. globals.css imports Tailwind CSS v4, so tailwindcss is needed too, and Vite takes the @tailwindcss/vite plugin.

bun add @horon-ai/react @horon-ai/tokens @phosphor-icons/react
bun add -d tailwindcss @tailwindcss/vite

npm에서는 같은 이름으로 설치합니다.On npm, install the same names.

npm install @horon-ai/react @horon-ai/tokens @phosphor-icons/react
npm install -D tailwindcss @tailwindcss/vite

피어 의존성Peer dependencies

package.json의 peerDependencies가 react와 react-dom을 >=19로 요구합니다. React 18 이하에서는 설치가 피어 의존성 경고를 냅니다.The package.json peerDependencies require react and react-dom at >=19. On React 18 or older, the install reports a peer dependency warning.

{
  "peerDependencies": {
    "react": ">=19",
    "react-dom": ">=19"
  }
}

로컬 경로로 설치Install from a local path

저장소를 앱 옆에 두고 file: 경로로 가리킵니다. README에 있는 방식이고, 패키지를 고치면 앱이 그 소스를 바로 씁니다.Keep the repository next to your app and point at it with a file: path. This is the way the README does it: an edit in the package reaches the app as source.

{
  "dependencies": {
    "@horon-ai/react": "file:../design/packages/react",
    "@horon-ai/tokens": "file:../design/packages/tokens"
  }
}

빌드 도구 설정Bundler setup

패키지는 TypeScript 소스를 그대로 배포하고 빌드 단계가 없습니다. 그래서 번들러가 node_modules 안의 소스를 컴파일해야 합니다.The package ships TypeScript source with no build step, so the bundler has to compile the source inside node_modules.

ViteVite

Tailwind는 @tailwindcss/vite 플러그인으로 넣습니다. 이 플러그인이 없으면 globals.css의 @import "tailwindcss"가 처리되지 않아 유틸리티 클래스가 생성되지 않습니다.Tailwind comes in through the @tailwindcss/vite plugin. Without it, the @import "tailwindcss" in globals.css is not resolved and no utility classes are generated.

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Next.jsNext.js

Next.js는 node_modules의 TypeScript를 기본으로 컴파일하지 않습니다. transpilePackages에 두 패키지를 넣어야 import가 해석되고, 넣지 않으면 소스의 타입 구문에서 문법 오류가 납니다.Next.js does not compile TypeScript in node_modules by default. Add both packages to transpilePackages so the imports resolve; without it the type syntax in the source fails to parse.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@horon-ai/react", "@horon-ai/tokens"],
};

export default nextConfig;

설치 확인Check the install

Button 하나를 띄웁니다. 둥근 알약 모양에 토큰 색으로 그려지고 콘솔에 스타일 오류가 없으면 설치가 끝났습니다.Render one Button. A rounded pill in the token colours, with no style errors in the console, means the install is done.

import { Button } from "@horon-ai/react";
import { Plus } from "@phosphor-icons/react";

export function Check() {
  return <Button icon={<Plus />}>Installed</Button>;
}