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

> Source: <https://dev.to/zhanglala103838/hulianui-a-react-component-library-with-349-components-oklch-runtime-theming-and-its-own-2jl3>
> Published: 2026-07-09 07:21:46+00:00

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)](https://hulianui.haloritual.com) — "Hulian" for short.

If you're in a hurry:

`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.

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:

hulianui is aimed squarely at all three.

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

`--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.**

``` js
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](https://hulianui.haloritual.com/theme/color).

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 |
|

And these aren't isolated demos — I built a dozen **complete, real admin apps** with them, 100% dogfooded, in the [live demos](https://hulianui.haloritual.com/demos):

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

This is the part I think is most ahead of the curve. hulianui serves a spec-compliant [llms.txt](https://llmstxt.org/) 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.

```
# Public npm, no token
pnpm add @hulianui/ui @hulianui/tokens
python
// Single barrel import
import { Button, ProTable, Gantt } from "@hulianui/ui";
```

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.