Documentation Guidelines

This guide explains how to create documentation for components in Evolphin UI. You can either use LLM-based automation or write docs manually using our template.

Quick Start

🤖 LLM Approach

Auto-generate docs using AI — best for new components

✏️ Manual Approach

Write docs by hand — best for simple updates

When to Use Each Approach

Situation	Recommended Approach
New component with many variants	🤖 LLM
Bulk documentation (5+ components)	🤖 LLM
Quick prop update	✏️ Manual
Simple component (< 3 props)	✏️ Manual
Need very specific wording	✏️ Manual
First draft, then refine	🤖 LLM → ✏️ Manual

LLM-Based Approach

Use AI to generate comprehensive documentation automatically.

Files Location

Project Structure

llm.txt

component-docs-prompt.mdLLM prompt template

component-template.mdxManual template

README.mdUsage instructions

How It Works

Copy the Prompt

Open llm.txt/component-docs-prompt.md and copy the entire contents.

Set the Component Name

Replace {COMPONENT_NAME} at the bottom of the prompt with your component:

Component to document: `button`

Provide Component Source

Give the LLM the component source code from:

registry/default/ui/{component-name}.tsx

Generate & Review

Run the prompt with your preferred LLM
Review the generated documentation
Make any necessary refinements

Save the Documentation

Save the final MDX to:

content/docs/components/{component-name}.mdx

Example Prompt Usage

# Copy from llm.txt/component-docs-prompt.md

[... prompt content ...]

Component to document: `dialog`

---

Here is the component source:

[Paste contents of registry/default/ui/dialog.tsx]

The LLM will analyze the component and generate complete documentation with all variants, examples, and API reference.

Manual Approach

For simple components or quick updates, use the manual template.

How It Works

Copy the Template

Copy llm.txt/component-template.mdx

Replace Placeholders

Replace all {placeholders} with actual values:

{ComponentName} → Button
{component-name} → button
{description} → Your description

Add Examples

Create a <ComponentPreview> for each:

Default state
Each variant
Each size
With icons
Special states (loading, disabled)

Fill API Reference

Document all props in the table:

| Prop      | Type                       | Default     | Description  |
| --------- | -------------------------- | ----------- | ------------ |
| `variant` | `"default" \| "secondary"` | `"default"` | Visual style |

Save

Save to content/docs/components/{component-name}.mdx

Documentation Structure

Every component doc should have these sections:

Required Sections

Section	Purpose
Title + Description	Frontmatter with SEO-friendly text
Installation	CLI commands with package manager tabs
Usage	Import statement + basic example
Examples	ComponentPreview for each variant
API Reference	Props table with types and defaults

Optional Sections

Section	When to Include
Accessibility	Keyboard/screen reader behavior
Subcomponents	If component has parts (Dialog.Trigger, etc.)
Composition	Complex usage patterns

Quality Checklist

Before submitting documentation:

Title matches component name
Description is concise (one line)
Installation has all 3 package managers
Import path uses @/components/ui/
Every variant has a working preview
API table includes ALL props
Default values are documented
Types are accurate
No broken imports

ComponentPreview Usage

Always use <ComponentPreview> for interactive examples:

<ComponentPreview code={`<Button variant="secondary">Click</Button>`}>
  <Button variant="secondary">Click</Button>
</ComponentPreview>

The code prop must match what's rendered inside. Keep them in sync!

Multi-line Code

For complex examples:

<ComponentPreview
  code={`<Button>\n  <Mail className="mr-2 h-4 w-4" />\n  Email\n</Button>`}
>
  <Button>
    <Mail className="mr-2 h-4 w-4" />
    Email
  </Button>
</ComponentPreview>

File Naming

Type	Convention	Example
Component docs	`{kebab-case}.mdx`	`date-picker.mdx`
Guide pages	`{kebab-case}.mdx`	`getting-started.mdx`
Meta files	`meta.json`	`meta.json`

Resources

LLM Prompt

View the component documentation prompt

Manual Template

View the manual template

Button Example

See a well-documented component