MCP HubMCP Hub
← Back to Skills

daisyui

vinnie357
Updated Today
42 views
0
View on GitHub
Metaaidesign

About

This Claude skill provides guidance for using the daisyUI component library with Tailwind CSS. It helps developers build UI components, implement responsive layouts, and configure or customize themes. Use this skill when choosing daisyUI components, converting designs, or troubleshooting styling.

Quick Install

Claude Code

Recommended
Plugin CommandRecommended
/plugin add https://github.com/vinnie357/claude-skills
Git CloneAlternative
git clone https://github.com/vinnie357/claude-skills.git ~/.claude/skills/daisyui

Copy and paste this command in Claude Code to install this skill

Documentation

daisyUI Component Library

Use this skill when building user interfaces with daisyUI and Tailwind CSS, implementing UI components, or configuring themes.

When to Use This Skill

Activate when:

  • Building UI components with daisyUI
  • Choosing appropriate daisyUI components for design needs
  • Implementing responsive layouts with daisyUI
  • Configuring or customizing themes
  • Converting designs to daisyUI components
  • Troubleshooting daisyUI component styling

What is daisyUI?

daisyUI is a Tailwind CSS component library providing:

  • Semantic component classes - High-level abstractions of Tailwind utilities
  • 33+ built-in themes - Light, dark, and creative theme variants
  • Framework-agnostic - Works with any HTML/CSS project
  • Utility-first compatible - Combine components with Tailwind utilities

Installation

Add daisyUI to your project:

npm install -D daisyui@latest

Configure tailwind.config.js:

module.exports = {
  plugins: [require("daisyui")],
}

For detailed installation options and CDN usage, see references/installation.md.

Component Categories

daisyUI provides components across these categories:

  • Actions: Buttons, dropdowns, modals, swap
  • Data Display: Cards, badges, tables, carousels, stats
  • Data Input: Input, textarea, select, checkbox, radio, toggle
  • Navigation: Navbar, menu, tabs, breadcrumbs, pagination
  • Feedback: Alert, progress, loading, toast, tooltip
  • Layout: Drawer, footer, hero, stack, divider

For component-specific guidance, consult the appropriate reference file.

Quick Usage

Basic Button

<button class="btn">Button</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>

Card Component

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="image.jpg" alt="Image" /></figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Card description text</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

Modal

<button class="btn" onclick="my_modal.showModal()">Open Modal</button>

<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Modal Title</h3>
    <p class="py-4">Modal content here</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

Theming

Using Built-in Themes

Set theme via HTML attribute:

<html data-theme="cupcake">

Available themes: light, dark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset

Theme Switching

<select class="select" data-choose-theme>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
  <option value="cupcake">Cupcake</option>
</select>

For advanced theming and customization, see references/theming.md.

Responsive Design

daisyUI components work with Tailwind's responsive prefixes:

<button class="btn btn-sm md:btn-md lg:btn-lg">
  Responsive Button
</button>

<div class="card w-full md:w-96">
  <!-- Responsive card -->
</div>

When to Consult References

  • Installation details: Read references/installation.md
  • Complete component list: Read references/components.md
  • Theming and customization: Read references/theming.md
  • Layout patterns: Read references/layouts.md
  • Form components: Read references/forms.md
  • Common patterns: Read references/patterns.md

Combining with Tailwind Utilities

daisyUI semantic classes combine with Tailwind utilities:

<!-- daisyUI component + Tailwind utilities -->
<button class="btn btn-primary shadow-lg hover:shadow-xl transition-all">
  Enhanced Button
</button>

<div class="card bg-base-100 border-2 border-primary rounded-lg p-4">
  <!-- Card with custom styling -->
</div>

Key Principles

  • Semantic over utility: Use component classes for common patterns
  • Utility for customization: Apply Tailwind utilities for unique styling
  • Theme-aware: Components adapt to theme colors automatically
  • Accessible: Components follow accessibility best practices
  • Composable: Combine components to build complex UIs

Pro Tips

  • Use btn-{size} modifiers: btn-xs, btn-sm, btn-md, btn-lg
  • Add btn-outline for outlined button variants
  • Use badge component for status indicators
  • Combine modal with modal-backdrop for better UX
  • Use drawer for mobile navigation patterns
  • Leverage stats component for dashboard metrics
  • Use loading class on buttons for async operations

GitHub Repository

vinnie357/claude-skills
Path: ui/skills/daisyui

Related Skills

sglang

Meta

SGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.

View skill

evaluating-llms-harness

Testing

This Claude Skill runs the lm-evaluation-harness to benchmark LLMs across 60+ standardized academic tasks like MMLU and GSM8K. It's designed for developers to compare model quality, track training progress, or report academic results. The tool supports various backends including HuggingFace and vLLM models.

View skill

content-collections

Meta

This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.

View skill

llamaguard

Other

LlamaGuard is Meta's 7-8B parameter model for moderating LLM inputs and outputs across six safety categories like violence and hate speech. It offers 94-95% accuracy and can be deployed using vLLM, Hugging Face, or Amazon SageMaker. Use this skill to easily integrate content filtering and safety guardrails into your AI applications.

View skill