DEV Community

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

Posted on

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

#react #typescript #opensource #webdev

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:

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:

  1. 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.
  2. 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.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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:

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:

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
Enter fullscreen mode Exit fullscreen mode 
// Single barrel import
import { Button, ProTable, Gantt } from "@hulianui/ui";
Enter fullscreen mode Exit fullscreen mode

If you also believe people shouldn't have to work against ugly software, give it a try — and tell me in the comments the one component your project keeps fighting with. hulianui might already have it.

Top comments (0)