Skip to main content
ninna-ui
AI Agent Docs

AI Agent Documentation

Everything an AI agent needs to use Ninna UI correctly: component import maps, common mistakes, prop tables, and a droppable rules file.

Resources

llms.txt

Compact AI-readable summary of Ninna UI: component import map, common mistakes, CSS setup, and quick start. Fetch this first.

View llms.txt

llms-full.txt

Full component API reference with prop tables and usage examples, followed by unminified TypeScript source for all 67 components.

View llms-full.txt

ninna-ui-rules.md

Copy-pasteable rules file for your repo. Drop into AGENTS.md, .cursorrules, or .windsurf/rules/ to give your AI agent Ninna UI context.

View rules file

.well-known/ai

AI discovery JSON endpoint with metadata, capabilities, and resource URLs for crawlers and AI agents.

View AI discovery

How AI agents should use Ninna UI

1

Fetch llms.txt

Start by reading /llms.txt. It contains the component import map (which package each component lives in), common mistakes, and CSS setup instructions. This is the single source of truth for AI agents.

2

Check the import map

Every component is exported from exactly ONE package. The import map tells you: Button is from @ninna-ui/primitives, Modal is from @ninna-ui/overlays, Input is from @ninna-ui/forms. Never guess the package.

3

Read common mistakes

Before writing code, read the Common Mistakes section. It covers: overlays vs primitives, gap as string not number, IconButton icon prop, Checkbox onCheckedChange, and compound dot-notation.

4

Use the rules file

Copy /ninna-ui-rules.md into your project as AGENTS.md or .cursorrules. This gives your AI agent persistent context about Ninna UI conventions without fetching the full llms.txt each time.

5

Deep dive with llms-full.txt

For detailed prop types and implementation patterns, fetch /llms-full.txt. It includes an auto-generated API quick reference with props and examples, followed by the full TypeScript source.

Quick Start for AI Agents

Share this prompt with your AI agent to give it Ninna UI context:

Read https://ninna-ui.dev/llms.txt for the component import map and common mistakes.
Follow the import map exactly — each component is in exactly ONE package.
CSS setup: @import "tailwindcss"; then @import "@ninna-ui/core/theme/presets/default.css";
For detailed props, fetch https://ninna-ui.dev/llms-full.txt.
Component DocsBlocksComparisonFeatures