daisyUI Blueprint

MCP (Model Context Protocol) server that provides AI assistants with daisyUI component snippets, conversion prompts, and Figma design integration.

Features

- 500+ daisyUI Snippets - Ready-to-use code for daisyUI components, layouts, and templates provided to LLMs
- AI Conversion Prompts - Convert Bootstrap to daisyUI, screenshots to code, Tailwind to daisyUI, and images to themes
- Figma Integration - Extract design data from Figma files and convert them to daisyUI code
- Theme Generation - Create custom daisyUI themes from image color palettes

Setup

$3

- A valid daisyUI Blueprint license from daisyui.com
- (Optional) Figma API token for Figma integration

$3

Set environment variables for the MCP server:

- LICENSE (required) - Your daisyUI Blueprint license key
- EMAIL (required) - Email associated with your license
- FIGMA (optional) - Your Figma API token for Figma integration
- IMAGES (optional) - Set to "false" to disable image fetching (default: "true")

Add this MCP server to your code editor or AI assistant client:

``json
{
"mcpServers": {
"daisyui-blueprint": {
"command": "npx",
"args": ["-y", "daisyui-blueprint@beta"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your-email@example.com",
"FIGMA": "your-figma-token"
}
}
}
}
`

Usage

$3

Request component code snippets from your AI assistant. The server provides 500+ components, layouts, and templates.

Available Categories:
- Components - Button, Card, Modal, Navbar, Dropdown, Table, Form inputs, and 50+ more
- Layouts - Responsive sidebars, top navbar, drawer layouts
- Templates - Dashboard, login form, and more
- Themes - Built-in themes, color utilities, custom theme creation

Example requests:
- "What's the XL button size in daisyUI?"
- "Make a login page with daisyUI"
- "Make a pricing card with daisyUI"
- "Create a daisyUI dashboard layout with sidebar and navbar"

The server will return the exact daisyUI code with examples and best practices.

$3

Use built-in prompts to convert existing code or designs to daisyUI:

#### Screenshot to daisyUI
Convert any UI screenshot to daisyUI code:
1. Provide a screenshot to your AI assistant
2. Ask to "recreate this using daisyUI"
3. The AI will analyze the design and generate daisyUI code matching the screenshot

#### Bootstrap to daisyUI
Convert Bootstrap code to daisyUI:
1. Provide your Bootstrap HTML code
2. Ask to "convert this Bootstrap code to daisyUI"
3. Bootstrap classes will be replaced with daisyUI components and Tailwind utilities

#### Tailwind to daisyUI
Optimize Tailwind code by replacing component patterns with daisyUI:
1. Share your Tailwind CSS code
2. Ask to "convert this to use daisyUI components"
3. Component-like patterns will be replaced with semantic daisyUI classes

#### Picture to Theme
Generate a custom daisyUI theme from any image:
1. Upload an image with colors you like
2. Ask to "create a daisyUI theme from this image"
3. A custom theme CSS will be generated matching the image's color palette

$3

Extract design data from Figma files and convert to daisyUI code.

Setup:
1. Get a Figma API token from Figma Account Settings
2. Add it to your environment configuration as FIGMA

Usage:
1. Copy a Figma file or node URL (e.g., https://www.figma.com/design/abc123/My-Design?node-id=1-2)
2. Ask your AI assistant to "convert this Figma design to daisyUI"
3. The server will fetch the design structure and help generate matching daisyUI code

Options:
- Adjust depth parameter to control how deep the node tree is traversed (default: 10)
- Enable includeImages` to fetch preview images of designs

License

Commercial license required. Get yours at daisyui.com

Docs

- Documentation: daisyui.com/blueprint
- daisyUI: daisyui.com