시작하기

Flame 디자인 시스템을 프로젝트에 도입하는 방법을 알아보세요.

설치

원하는 패키지 매니저로 Flame을 설치하세요.

pnpm add flame-ui

Peer 의존성

Flame은 React 19를 기준으로 하며, 위치 계산에 Floating UI를 사용합니다(Popover, Select, Tooltip). 패키지와 함께 설치하세요:

pnpm add @floating-ui/react react react-dom

기본 사용법

모든 컴포넌트는 도트 표기법의 복합 컴포넌트 패턴을 따릅니다. 기본 스타일이 없는 헤드리스이므로, 직접 요소를 감싸고 자유롭게 스타일링합니다.

import { Accordion } from 'flame-ui';

function Example() {
  return (
    <Accordion single>
      <Accordion.Item>
        <Accordion.Trigger>
          <button>What is Flame?</button>
        </Accordion.Trigger>
        <Accordion.Content>
          <p>A headless React component library.</p>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

스타일링

Flame은 스타일을 전혀 포함하지 않습니다. 모든 컴포넌트는 전달한 className과 네이티브 속성을 실제 요소로 그대로 전달하고, 상태를 data 속성(예: data-selected)으로 노출하므로 Tailwind·순수 CSS 등 원하는 방식으로 스타일링할 수 있습니다.

// Pass className / props straight through,
// and style state via data-attributes.
<Tabs.Item
  value="overview"
  className="px-4 py-2 data-[selected=true]:text-flame-accent"
>
  Overview
</Tabs.Item>

주요 특징

헤드리스 — 기본 스타일 없이 완전한 기능 제공
복합 컴포넌트 — 도트 표기법으로 직관적 조합
트리 셰이킹 — 사용하는 컴포넌트만 번들에 포함
웹 표준 — 네이티브 <dialog> top layer와 Floating UI 위치 계산