Cursor Integration

Prerequisites

• Cursor installed
• A React/Next.js project with shadcn/ui initialized
• Tailwind CSS v4

1. Add the .cursorrules file

Download the context file to your project root. This gives Cursor full knowledge of the n3wth component catalog, design tokens, and usage patterns.

curl -o .cursorrules https://kit.newth.ai/ai/.cursorrules

2. Configure the MCP server

The MCP server gives Cursor live access to the component registry. Create or edit .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "n3wth-kit": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "registry:mcp"],
      "env": {
        "REGISTRY_URL": "https://kit.newth.ai/r/registry.json"
      }
    }
  }
}

3. Install components

Use the shadcn CLI to add components from the registry:

npx shadcn add https://kit.newth.ai/r/button.json
npx shadcn add https://kit.newth.ai/r/card.json
npx shadcn add https://kit.newth.ai/r/input.json

4. Prompt examples

With .cursorrules loaded, Cursor knows about your components:

Build a settings page using the n3wth Card and Input components

Create a modal with form inputs following the n3wth design system

Tips

• Commit .cursorrules to your repo so the whole team gets the same context
• Reference component names directly in prompts for better results
• Re-download .cursorrules when new components are added to the registry