daisyui

vinnie357

Updated Yesterday

32 views

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.

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

Quick Install

/plugin add https://github.com/vinnie357/claude-skills/tree/main/daisyui

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

GitHub 仓库

vinnie357/claude-skills

Path: ui/skills/daisyui

Related Skills

sglang

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

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.