Beetle

📄 Daisyui Mcp Cheatsheet

2 min read

🌼 daisyUI MCP Integration Cheat Sheet

🎯 Goal

Keep Windsurf agents wired into daisyUI + Context7 knowledge bases for instant, accurate component + theme generation.

🛠️ Core MCP Servers

  • 🧠 context7 (stdio via npx)
  • 📚 daisyui Docs (GitMCP SSE endpoint)
  • 🌐 Optional: mcp-remote for Claude Desktop uplink

🧾 Windsurf ~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    },
    "daisyui Docs": {
      "serverUrl": "https://gitmcp.io/saadeghi/daisyui"
    }
  }
}

🧾 VSCode .vscode/mcp.json

{
  "servers": {
    "context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    },
    "daisyUI": {
      "type": "sse",
      "url": "https://gitmcp.io/saadeghi/daisyui"
    }
  }
}

🧾 Claude Desktop claude_desktop_config.json

{
  "mcpServers": {
    "Context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    },
    "daisyui Docs": {
      "command": "npx",
      "args": ["mcp-remote", "https://gitmcp.io/saadeghi/daisyui"]
    }
  }
}

🚦 Cursor Prompt Injection

@web https://daisyui.com/llms.txt

✨ Example Prompts

  • give me a light daisyUI 5 theme with tropical palette. use context7
  • generate daisyUI button group using join component

🧩 Component Snippets

<!-- Button -->
<button class="btn">Button</button>
<button class="btn rounded-full px-6">Custom Button</button>
 
<!-- Join Group -->
<div class="join">
  <button class="btn join-item">Prev</button>
  <button class="btn join-item">Play</button>
  <button class="btn join-item">Next</button>
</div>
 
<!-- Divider Positions -->
<div class="flex w-full">
  <div class="divider divider-horizontal divider-start">Start</div>
  <div class="divider divider-horizontal">Center</div>
  <div class="divider divider-horizontal divider-end">End</div>
</div>
 
<!-- Loading States -->
<span class="loading loading-ball loading-sm"></span>
<span class="loading loading-dots loading-md"></span>

🧪 Testing Hooks

  • Run npm run verify after integrating new component code.
  • Capture Playwright traces when validating daisyUI styling regressions.

📝 Reference

  • /docs/daisyui-mcp-cheatsheet.md
  • Keep MCP server versions in sync with workspace tooling (Playwright 1.56.0 runtime + 1.54.1 headless shell).

Graph View