Using AI Agents to Build React UIs with Ninna UI

AI agents can dramatically speed up React UI development — but only if you give them the right context. Here's a practical guide to using AI assistants with Ninna UI, including example prompts and common pitfalls.

Setting up your AI assistant

Most AI coding tools (Cursor, Claude, Copilot) can read files from your project. To get the best results with Ninna UI:

1. Add the AGENTS.md file to your project root (available at ninna-ui.dev/ninna-ui-rules.md)
2. Reference llms.txt for component import maps and API details
3. Keep a Ninna UI example component in your project for the AI to learn from

Example prompt: login form

Create a login form with:
- Email and password fields using @ninna-ui/forms
- A 'Remember me' checkbox
- A submit button with loading state
- Error messages below each field
- Use the Field component for label/error wiring

Use Ninna UI components. Import from:
- @ninna-ui/primitives for Button, Heading
- @ninna-ui/forms for Input, Field, Checkbox
- @ninna-ui/layout for VStack

The AI should produce something like:

import { Button, Heading } from "@ninna-ui/primitives";
import { Input, Field, Checkbox } from "@ninna-ui/forms";
import { VStack } from "@ninna-ui/layout";
import { useState } from "react";

export function LoginForm() {
  const [loading, setLoading] = useState(false);
  return (
    <VStack gap="4" as="form" onSubmit={(e) => e.preventDefault()}>
      <Heading as="h1" size="2xl">Log in</Heading>
      <Field label="Email" htmlFor="email">
        <Input id="email" type="email" placeholder="you@example.com" />
      </Field>
      <Field label="Password" htmlFor="password">
        <Input id="password" type="password" />
      </Field>
      <Checkbox>Remember me</Checkbox>
      <Button type="submit" color="primary" isLoading={loading}>
        Log in
      </Button>
    </VStack>
  );
}

Common pitfalls

• AI imports Modal/Tooltip/DropdownMenu from @ninna-ui/primitives — they live in @ninna-ui/overlays
• AI uses onChange for Checkbox/Switch — use onCheckedChange instead
• AI passes numbers to gap/size props — these are strings (gap="4", not gap={4})
• AI wraps components in a ThemeProvider — Ninna UI has no provider, just CSS imports
• AI creates a tailwind.config.ts — Tailwind v4 is CSS-first, no config file needed

Prompt patterns that work well

Be specific about which package to import from. Mention the component names explicitly. Describe the layout structure (VStack, HStack, Grid). Reference existing blocks from /blocks for complex layouts — the AI can adapt them.

For complex pages, break the prompt into sections: 'First create the header with...', then 'Add the main content area with...', then 'Add a footer with...'. This produces better results than one giant prompt.