VSCode setup for daisyUI - Daisyui

To setup Tailwind CSS syntax support and IntelliSense, see Tailwind CSS docs.

VSCode and Copilot LLM setup

daisyui.com/llms.txt file is a compact, text version of daisyUI docs to help AI generate accurate daisyUI code based on your prompt.
Here's how to use daisyUI llms.txt in VSCode:

Quick use

In chat window type this and VSCode will use daisyUI's llms.txt file to generate code.

md:prompt

#fetch https://daisyui.com/llms.txt

Project-level permanent setup

You can setup daisyUI's llms.txt file to your workspace so Copilot can use it by default. (Read more at VSCode docs)

Run this command to save the llms.txt file to .github/instructions/daisyui.instructions.md

sh:Terminal

curl -L https://daisyui.com/llms.txt --create-dirs -o .github/instructions/daisyui.instructions.md

MCP server

MCP is a an API to communicate with AI models. You can add MCP servers and Copilot will communicate with them to get more accurate results.
You can use Context7 or daisyUI GitMCP as MCP server in VSCode.

daisyUI Blueprint

Blueprint is the official MCP server for daisyUI. Read more about Blueprint.

Get a Blueprint License
In VS Code press <kbd class="kbd kbd-sm">⌘ CMD</kbd> + <kbd class="kbd kbd-sm">⇧ Shift</kbd> + <kbd class="kbd kbd-sm">P</kbd> ( Or <kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">Shift</kbd> + <kbd class="kbd kbd-sm">P</kbd> )
Search for MCP: Open User Configuration
Add this and set your license key + email address in it Figma API Key is optional - Only needed for Figma-to-code conversion

diff:mcp.json

{
  "servers": {
+   "daisyui-blueprint": {
+     "type": "stdio",
+     "command": "npx",
+     "args": ["-y", "daisyui-blueprint@latest"],
+     "env": {
+       "LICENSE": "YOUR BLUEPRINT LICENSE KEY",
+       "EMAIL": "YOUR EMAIL ADDRESS",
+       "FIGMA": "YOUR FIGMA API KEY (optional)"
+     }
+   }
  }
}

Usage

Now you can ask AI anything about daisyUI, and write use Blueprint MCP at the end of your prompt.
For example:

md:prompt

give me a light daisyUI 5 theme with tropical color palette. use Blueprint MCP

</div> <input type="radio" name="mcp_options" class="tab" aria-label="Context7" /> <div class="tab-content bg-base-100 border-base-300 px-12 py-3">

Option 1. Setup Context7 MCP server for VSCode

Click this button to install Context7 MCP server in VSCode:

Install Context7 MCP </a>

Option 2. Setup Context7 MCP server for current workspace only

Create a .vscode/mcp.json file in your project root if it doesn't exist.
Add Context7 MCP server:

diff:.vscode/mcp.json

{
  "servers": {
+   "context7": {
+     "type": "stdio",
+     "command": "npx",
+     "args": [
+       "-y",
+       "@upstash/context7-mcp@latest"
+     ]
+   }
  }
}

Usage

Now in Agent Mode you can ask AI anything about daisyUI. write use context7 at the end of your prompt.
For example:

md:prompt

give me a light daisyUI 5 theme with tropical color palette. use context7

</div> <input type="radio" name="mcp_options" class="tab" aria-label="GitMCP" /> <div class="tab-content bg-base-100 border-base-300 px-12 py-3">

Option 1. Setup daisyUI GitMCP server for VSCode

Click this button to install GitMCP server in VSCode:

Install daisyUI GitMCP </a>

Option 2. Setup daisyUI GitMCP server for current workspace only

Create a .vscode/mcp.json file in your project root if it doesn't exist.
Add daisyUI GitMCP server:

diff:.vscode/mcp.json

{
  "servers": {
+   "daisyUI": {
+     "type": "sse",
+     "url": "https://gitmcp.io/saadeghi/daisyui"
+   }
  }
}

Usage

Now in Agent Mode you can ask AI anything about daisyUI.

md:prompt

give me a light daisyUI 5 theme with tropical color palette

</div> </div>