hulianui: a React component library with 349 components, OKLCH runtime theming, and its own llms.txt for AI coding assistants

瑚琏 — Thu, 09 Jul 2026 07:21:46 +0000

There's no shortage of React component libraries. What's missing is one that's good-looking by default, covers the deep-end components nobody ships, and can be read verbatim by your AI coding assistant. That's why I built hulianui (@hulianui/ui) — "Hulian" for short.

If you're in a hurry:

Docs & live site: https://hulianui.haloritual.com
Live demos (a dozen real admin apps): https://hulianui.haloritual.com/demos
GitHub (MIT): https://github.com/hulianui/hulian
Install: pnpm add @hulianui/ui @hulianui/tokens

Here's how it differs from shadcn/ui, MUI, and Ant Design, and a few design decisions I'm proud of.

Why build another one

I'm not trying to out-Ant-Design enterprise dashboards, and this isn't another shadcn reskin. The real pain is that these three things are rarely true at the same time:

Looks good out of the box. Many libraries are feature-complete but ship with a default skin that screams "admin panel," and you burn hours tuning tokens before it's presentable.
Covers the deep end. Gantt charts, node/flow editors, danmaku, geo heatmaps, schedulers — the long-tail-but-critical components that generic libraries just don't have, so every project rebuilds them or stitches together five dependencies.
AI-friendly. In 2026, half of writing feature code is a conversation with Cursor / Claude Code / Copilot. If a component library can't be understood accurately by an AI assistant, onboarding is a stream of hallucinated prop names and doc-hunting.

hulianui is aimed squarely at all three.

OKLCH two-layer tokens + runtime theming, zero dark-mode flash

The theming system is built on the OKLCH color space + Tailwind v4 @theme, split into two token layers:

Primitive layer: OKLCH color ramps (perceptually uniform — no graying or hue shift across light/dark).
Semantic layer: --color-primary / --color-surface / --color-hairline, etc. Components only ever consume semantic tokens.

The payoff: theme switching is just runtime CSS-variable changes — no reload, no flash.

import { ThemeProvider } from "@hulianui/ui";

// Light/dark is a data-theme-driven pure CSS-variable swap — zero repaint flash
<ThemeProvider defaultSetting="system">
  <App />
</ThemeProvider>

Dark mode isn't a naive color inversion either — there's a theme-aware shadow system (dark mode uses a white inset rim-light instead of drop shadows) and a "hairline" border token (light mode separates with shadow, dark mode with a 1px border). You can tweak all of it live in the theme docs.

The components generic libraries don't ship

This is hulianui's biggest differentiator. Beyond the usual forms/tables/nav/feedback, it ships a batch of components that are hard to find in generic libraries and painful in every project — all zero/light-dependency, all on the same token skin:

Component	What it does	Docs
Gantt	Read-only CSS-grid percentage layout, UTC date math, today line, zero deps	/components/gantt
Flow (node canvas)	Native PointerEvents + SVG bézier edges, controlled nodes/edges, drag nodes / drag-to-connect / pan-zoom	/components/flow
Danmaku	Live-stream scrolling comment lanes	/components/danmaku
WorldMap	Litable points, drill-down, aspect-fit	/components/world-map
Scheduler	Month/week/day/resource views, drag-to-create / move / resize	/components/scheduler
ProTable	Search area + toolbar (density / column settings / fullscreen) + pagination — a whole admin list page in one component	/components/pro-table
Kanban / Timeline / Sankey	Board / timeline / sankey diagram	Kanban · Timeline · Sankey

And these aren't isolated demos — I built a dozen complete, real admin apps with them, 100% dogfooded, in the live demos:

Global dispatch command center (data wall + WorldMap drill-down)
LLM API gateway console
AI image/video workflow builder (Flow node canvas in anger)

The real test of a component is whether it dares to power full business pages, not just a storybook cell.

AI-first: an llms.txt your coding assistant can read verbatim

This is the part I think is most ahead of the curve. hulianui serves a spec-compliant llms.txt machine-readable corpus at the site root:

https://hulianui.haloritual.com/llms.txt — a categorized index of all 353 components (one-line purpose + link each)
https://hulianui.haloritual.com/llms-full.txt — self-contained full corpus: per-component Props / Events / Slots / examples

So when you onboard with Cursor, Claude Code, or Copilot, you feed it llms.txt and it writes code from ground truth instead of training memory — no guessed prop names, no hallucinated APIs. Every component doc page also has a "Copy MD for AI" button.

In a world where "let the AI write the feature" is the daily default, that might be more useful than a few more components.

Getting started

# Public npm, no token
pnpm add @hulianui/ui @hulianui/tokens

// Single barrel import
import { Button, ProTable, Gantt } from "@hulianui/ui";

📖 Docs: https://hulianui.haloritual.com
🏗️ Live demos: https://hulianui.haloritual.com/demos
⭐ GitHub (MIT — stars & issues welcome): https://github.com/hulianui/hulian