{"slug": "hulianui-a-react-component-library-with-349-components-oklch-runtime-theming-and", "title": "hulianui: a React component library with 349 components, OKLCH runtime theming, and its own llms.txt for AI coding assistants", "summary": "A developer built hulianui, a React component library with 349 components, OKLCH runtime theming, and an llms.txt file for AI coding assistants. The library includes deep-end components like Gantt charts and ProTable, and is designed to be good-looking by default while allowing AI tools to read its documentation verbatim. The theming system uses OKLCH color space and Tailwind v4 for runtime CSS-variable changes without reload or flash.", "body_md": "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.\n\nIf you're in a hurry:\n\n`pnpm add @hulianui/ui @hulianui/tokens`\n\nHere's how it differs from shadcn/ui, MUI, and Ant Design, and a few design decisions I'm proud of.\n\nI'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:\n\nhulianui is aimed squarely at all three.\n\nThe theming system is built on the **OKLCH color space + Tailwind v4 @theme**, split into two token layers:\n\n`--color-primary`\n\n/ `--color-surface`\n\n/ `--color-hairline`\n\n, etc. Components only ever consume semantic tokens.The payoff: theme switching is just runtime CSS-variable changes — **no reload, no flash.**\n\n``` js\nimport { ThemeProvider } from \"@hulianui/ui\";\n\n// Light/dark is a data-theme-driven pure CSS-variable swap — zero repaint flash\n<ThemeProvider defaultSetting=\"system\">\n  <App />\n</ThemeProvider>\n```\n\nDark 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).\n\nThis 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:\n\n| Component | What it does | Docs |\n|---|---|---|\n| Gantt | Read-only CSS-grid percentage layout, UTC date math, today line, zero deps |\n|\n\nAnd 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):\n\nThe real test of a component is whether it dares to power full business pages, not just a storybook cell.\n\nThis 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:\n\nSo 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.\n\nIn a world where \"let the AI write the feature\" is the daily default, that might be more useful than a few more components.\n\n```\n# Public npm, no token\npnpm add @hulianui/ui @hulianui/tokens\npython\n// Single barrel import\nimport { Button, ProTable, Gantt } from \"@hulianui/ui\";\n```\n\nIf 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.", "url": "https://wpnews.pro/news/hulianui-a-react-component-library-with-349-components-oklch-runtime-theming-and", "canonical_source": "https://dev.to/zhanglala103838/hulianui-a-react-component-library-with-349-components-oklch-runtime-theming-and-its-own-2jl3", "published_at": "2026-07-09 07:21:46+00:00", "updated_at": "2026-07-09 07:41:32.161835+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "large-language-models", "ai-tools"], "entities": ["hulianui", "shadcn/ui", "MUI", "Ant Design", "Tailwind v4", "Cursor", "Claude Code", "Copilot"], "alternates": {"html": "https://wpnews.pro/news/hulianui-a-react-component-library-with-349-components-oklch-runtime-theming-and", "markdown": "https://wpnews.pro/news/hulianui-a-react-component-library-with-349-components-oklch-runtime-theming-and.md", "text": "https://wpnews.pro/news/hulianui-a-react-component-library-with-349-components-oklch-runtime-theming-and.txt", "jsonld": "https://wpnews.pro/news/hulianui-a-react-component-library-with-349-components-oklch-runtime-theming-and.jsonld"}}