소개Introduction

@horon-ai/react는 84개 컴포넌트와 토큰, 훅을 담은 웹 라이브러리입니다. 동작과 접근성은 Base UI에서 옵니다.@horon-ai/react is a web library of 84 components, tokens and hooks. Behaviour and accessibility come from Base UI.

패키지 구성What the package is

컴포넌트의 모양과 값은 Figma Horon 파일에서 왔고, 동작과 접근성은 Base UI(@base-ui/react)에 맡깁니다. 색, 글자, 간격은 @horon-ai/tokens의 값이고 Tailwind CSS v4 유틸리티 클래스로 노출됩니다. 빌드 산출물 없이 TypeScript 소스를 그대로 배포하므로 소비하는 쪽 번들러가 소스를 컴파일합니다.Component looks and values come from the Figma Horon file, while behaviour and accessibility come from Base UI (@base-ui/react). Colour, type and spacing are @horon-ai/tokens values exposed as Tailwind CSS v4 utilities. The package ships TypeScript source with no build output, so the consuming bundler compiles it.

  • 84개 컴포넌트: 버튼과 입력에서 대화상자, 데이터 표, 에이전트 패널까지 한 진입점에서 가져옵니다.84 components: buttons and fields through dialogs, data tables and agent panels, all from one entry.
  • 토큰: 색, 글자, 간격, 반경, 그림자, 유리 재질이 @horon-ai/tokens에 있고, theme.css가 CSS 변수로 바꿉니다.Tokens: colour, type, spacing, radius, shadow and glass come from @horon-ai/tokens, and theme.css turns them into CSS variables.
  • 훅 8개: useColorScheme, useMediaQuery, useHotkey처럼 브라우저 상태를 읽는 훅이 들어 있습니다.Eight hooks: useColorScheme, useMediaQuery and useHotkey read browser state for you.
  • React 19 이상이 피어 의존성입니다. react와 react-dom을 >=19로 요구합니다.React 19 or newer is the peer dependency: react and react-dom at >=19.

빠른 시작Quick start

세 단계입니다. 패키지를 더하고, 전역 스타일을 한 번 불러오고, 컴포넌트를 씁니다.Three steps: add the packages, import the global styles once, then use a component.

패키지 설치Install the packages

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

전역 스타일Load the global styles

styles.css 
@import "@horon-ai/react/globals.css";
@source "../node_modules/@horon-ai/react/src/**/*.{ts,tsx}";

첫 컴포넌트Use a component

inbox.tsx 
import { Button, Card, Input } from "@horon-ai/react";
import { Plus } from "@phosphor-icons/react";

export function Inbox() {
  return (
    <Card title="Inbox Manager" description="6 emails need you.">
      <Input surface="solid" placeholder="Search bots" />
      <Button icon={<Plus />}>New bot</Button>
    </Card>
  );
}

문서Docs

이 아래 페이지가 설치에서 시작해 스타일, 테마, 아이콘 순서로 이어집니다.The pages below start at installation and continue through styling, theming and icons.