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

Prerequisites

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

Installation

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:

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

Usage

1. daisyUI Component Snippets

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.

2. Conversion Prompts

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. Figma Integration

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