🔥 Flame

A headless React 19 component library for building accessible UIs — fully functional, zero default styles. You bring the markup and the styling; Flame brings the behavior, accessibility, and state.

📖 Documentation  ·  📦 npm — flame-ui

Why Flame?

• 🎨 Headless — ships zero styles. Components forward your className/props and expose state through data-* attributes (data-selected, data-expanded, …), so you can style with Tailwind, plain CSS, or anything else.
• 🧩 Compound components — compose with dot notation (Dialog.Trigger, Dialog.Content, …) and render-prop children for full control over rendering.
• ♿ ARIA built in — roles, state attributes, and focus management out of the box (aria-expanded, aria-selected, aria-live, …).
• 🌐 Web standards first — overlays are built on the native <dialog> top layer; positioning uses Floating UI.
• 🔠 Typed — written in TypeScript, type definitions bundled.

Components

Accordion · Dialog · Drawer · Funnel · Popover · Select · Tabs · Toast · Tooltip

Quick Start

npm install flame-ui
# peer deps
npm install react react-dom @floating-ui/react

import { Dialog } from "flame-ui";

function Example() {
  return (
    <Dialog closeOutside>
      <Dialog.Trigger>
        <button>Open</button>
      </Dialog.Trigger>

      <Dialog.Content>
        <h2>Hello flame</h2>
        <p>Headless modal built on the native &lt;dialog&gt; element.</p>
        <Dialog.Closer>
          <button>Close</button>
        </Dialog.Closer>
      </Dialog.Content>
    </Dialog>
  );
}

See the documentation for the full API of every component.

Monorepo Structure

packages/
  ui/          flame-ui — the published headless component library
apps/
  docs/        Documentation site (Astro + i18n), deployed to Cloudflare Pages
  storybook/   Interactive component playground
configs/       Shared build & test configs (tsup, vitest)

Development

git clone https://github.com/rlatlswo135/flame.git
cd flame
pnpm install
pnpm build

Command	Description
pnpm dev	Run all packages in watch mode
pnpm build	Build ui → docs
pnpm test	Run tests across packages
pnpm lint	Lint with biome
pnpm commit	Commitizen conventional commit
pnpm @ui <cmd>	Run command in flame-ui
pnpm @docs <cmd>	Run command in @flame/docs
pnpm @storybook <cmd>	Run command in @flame/storybook

Engineering Notes

• Testing — behavior-level tests with Vitest + Testing Library on happy-dom; prepublishOnly blocks publishing on failing tests.
• CI/CD — GitHub Actions runs the ui test suite as a gate, then builds and deploys the docs to Cloudflare Pages on every push to main.
• Dependency management — pnpm workspace catalog keeps shared dependency versions in a single source of truth.
• Tooling — tsup (build), biome (lint/format), commitizen + husky (conventional commits).

License

MIT