AI Integration Components

Give AI the full guide, and it builds with 7onic components and tokens. Props, compound patterns, form recipes — all included.
For token-only usage, see the Token AI Integration.

llms-full.txt

38 components

Zero hardcoding

https://7onic.design/llms-full.txt

Supported AI Tools

llms-full.txt follows the same standard. Any AI tool that reads text can use it.

Claude Code

Add to CLAUDE.md or pass via prompt

Cursor

Add to .cursor/rules

GitHub Copilot

Add to copilot-instructions.md

ChatGPT

Paste URL in conversation

How to Use

Choose the method that fits your AI tool and workflow.

Reference Path

Point your AI tool to the file in node_modules.

CLAUDE.md / .cursor/rules

Rules: node_modules/@7onic-ui/react/llms.txt

Copy & Integrate

Copy llms-full.txt content into your project's AI rules file.

Your rules file

# 7onic Components + Tokens
(paste llms-full.txt content here)

Direct Prompt

Tell the AI to read llms-full.txt directly.

Prompt

Read node_modules/@7onic-ui/react/llms.txt and build a dashboard with 7onic

URL Reference

Use the domain URL for web-based AI tools.

Prompt / Rules

Read https://7onic.design/llms-full.txt and build with 7onic components

What AI Does Automatically

With the full guide, AI handles components and tokens together.

Uses 7onic Components

Instead of building custom buttons/modals/forms, AI uses your existing components with correct Props.

Correct Compound Patterns

AI knows Modal needs Modal.Content, Tooltip needs Tooltip.Trigger — no missing parts.

Token Classes Only

Uses bg-primary instead of bg-blue-500. All styling follows your design tokens.

Form Patterns

AI wraps inputs in Field, adds Field.Label with required, and uses correct error handling.

Before / After

The same UI, built with and without the component guide

Without llms-full.txt

<button
  className="bg-blue-500 text-white px-4 py-2
    rounded-lg hover:bg-blue-600"
>
  Save Changes
</button>

<div className="fixed inset-0 bg-black/50 z-[9999]">
  <div className="bg-white rounded-lg p-6 max-w-md">
    <h2>Confirm</h2>
    <p className="text-gray-500">Are you sure?</p>
  </div>
</div>

With llms-full.txt

<Button variant="solid">
  Save Changes
</Button>

<Modal>
  <Modal.Trigger asChild>
    <Button>Open</Button>
  </Modal.Trigger>
  <Modal.Content>
    <Modal.Title>Confirm</Modal.Title>
    <Modal.Description>
      Are you sure?
    </Modal.Description>
  </Modal.Content>
</Modal>

Components handle dark mode, accessibility, z-index layering, and animations automatically. No manual implementation needed.

Example Prompts

Copy these prompts to start building with components.

Read llms-full.txt and build a SaaS dashboard with 7onic

Create a settings page with form validation using 7onic components

Build a data table with sorting and pagination — use 7onic

Token Rules

Components use design tokens for all styling. For the complete token guide, see AI Integration (Tokens).

bg-blue-500

bg-primary

text-gray-700

text-foreground

p-[17px]

p-4

rounded-[7px]

rounded-md

Troubleshooting

Common issues and how to fix them

AI builds custom components instead of using 7onic

Tell it: "Re-read llms-full.txt. Use existing 7onic components, don't build custom ones."

AI forgets compound sub-components

Remind it: "Modal requires Modal.Content and Modal.Title. Check the compound structure in llms-full.txt."

AI passes wrong Props

Say: "Check the Props table in llms-full.txt. Only use documented prop values."

Disclaimer

AI is not perfect. Always review AI-generated code before deployment. Verify design requirements, accessibility, and token usage are correct.