Minimalism in code & design
Designed minimal for modern developers and their AI agents
React components to build your own design system in a simple way. The source lives in your repo, so your AI reads it like any other file.
Live examples
There is no library underneath
Most catalogs are a styling layer over a headless kit you also have to install. These are written from scratch, and every panel below is the real component running on this page.
Featured
A dashboard panel with four slots and no chart library
Contribution History is one Card composed of header, content and footer slots. The bars are plain divs sized from design tokens. Read it top to bottom, change any line.
- Card.Header
- Card.Content
- Card.Footer
- Button
Contribution History
Last 6 months of activity
UI element registry
49 UI elements, ready to copy
Every primitive in NachUI. Accessible, themeable, yours the moment you paste it, and readable by any agent working in your code.
Built-in assistant
Meet the NachUI AI Assistant
Every docs page ships with an assistant that has read the whole codebase. Ask it what a component does, how to compose it, or why a token exists. It answers from the actual source, not from a guess.
- Reads the source
- It grounds every answer in the components, tokens and docs of this repo.
- Explains in context
- Hit “Explain this” on any page and it picks up right where you are reading.
- Composes for you
- Ask for a layout and it returns code that uses your own primitives.
- Or bring your own agent
- The same docs are served as llms.txt and raw markdown, so Claude, Cursor or Windsurf can read them straight from the source.
mcp
Connect it once.Your agent gets the whole catalog.
Point any MCP client at the server and your agent can list the catalog, pull the real source of a component and read the docs before it writes a line. Same copy and paste as always, without the part where it invents a component that does not exist.
mcp.json
{ "mcpServers": { "nachui": { "command": "npx", "args": ["-y", "nachui-mcp"] } }}list_componentsEvery component in the registry, with the npm packages it needs.get_componentThe source of one component, the same file you would copy by hand.search_docsSemantic search across the documentation, in English or Spanish.get_docA full docs page as markdown, for when a snippet is not enough.
Nothing is installed and nothing runs in the background. Four read-only tools over the same registry the docs use.
MIT