Writing LLM-Friendly Component Documentation
Component docs aren't just for humans anymore. Here's how to structure documentation so AI agents can read it, cite it, and generate correct code from it.
By Ninna UI Team
Component documentation has two audiences in 2026: human developers and AI coding assistants. The good news is that what makes docs LLM-friendly also makes them human-friendly: clear structure, consistent patterns, and explicit examples.
The llms.txt file
llms.txt is the most important file for AI discoverability. It sits at the root of your domain (your-site.com/llms.txt) and provides a machine-readable overview of your project. Think of it as robots.txt for LLMs.
A good llms.txt includes: a project summary, a component import map (which package exports which components), common mistakes and anti-patterns, and links to detailed API references.
Structured prop tables
AI agents parse structured data better than prose. Instead of describing props in paragraphs, use a consistent table format:
## Button Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'solid' \| 'outline' \| 'ghost' \| 'soft' \| 'link' | 'solid' | Visual style |
| size | 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Button size |
| color | 'primary' \| 'success' \| 'warning' \| 'danger' | 'primary' | Semantic color |
| isLoading | boolean | false | Shows spinner and disables |
| startIcon | ReactNode | - | Leading icon |Anti-patterns are as important as patterns
AI agents learn from patterns in their training data. If your library has API conventions that differ from the mainstream (e.g., onCheckedChange instead of onChange), document them as explicit anti-patterns:
## Common Mistakes
### Wrong: Importing overlays from primitives
Modal, Drawer, Popover, Tooltip, DropdownMenu are in @ninna-ui/overlays
NOT @ninna-ui/primitives
### Wrong: onChange on Checkbox/Switch
Use onCheckedChange (receives boolean), not onChange (receives ChangeEvent)
### Wrong: Number for gap/size props
gap="4" (string), NOT gap={4} (number)Example-rich documentation
Every component should have at least one copy-paste-ready example. AI agents use these as templates — if the example is correct, the generated code will be correct. Cover the most common use case, not edge cases.
Auto-generation is key
Ninna UI auto-generates llms.txt from the actual package source code. The import map, prop tables, and API references are extracted programmatically — they're never out of sync with the code. This is the only sustainable approach: hand-maintained docs always drift.