Introduction
Production-ready React components you own. Full features, not primitives.
Fujin is a set of components, blocks and recipes you copy into your app.
It is not a component library you install. There is no @fujin/ui package in your
dependencies. You run a command, the code lands in your project, and it is yours
to read, edit and ship.
How it is different
shadcn/ui gives you excellent primitives and leaves the assembly to you. That is the right call for a primitive library — and it means every team rebuilds the same data table, the same filter bar, the same auth flow, every time.
Fujin ships the assembly.
Table gives you <Table>, <TableHeader>, <TableRow>. Sorting,
pagination, filtering, column visibility, row selection and URL state are a
400-line recipe you copy from the docs and maintain yourself.
The three ideas
1. Logic and looks live in separate files
Every component ships as a headless hook plus a presentational shell.
lib/data-table/use-data-table.ts # state, behaviour, no classNames
components/ui/data-table/data-table.tsx # markup, no business logicRestyle the shell as much as you like. The behaviour keeps working. This is the rule that makes "just change the UI" actually true.
2. Recipes install features, not files
npx fujin@latest add authThat is routes, server actions, validation schemas, session handling, the sign-in and sign-up screens, and the middleware — wired together and typed.
3. Agents get a map, not a maze
Every item in the registry ships structured metadata over MCP: what it is for, when not to use it, its props, its gotchas and a working snippet. An agent spends a few hundred tokens learning a component instead of reading thousands of lines of source.