daisyUI 5
0daisyUI 5 is a CSS component library designed for Tailwind CSS 4, providing semantic class names for common UI components. It is ideal for developers looking to enhance their UI design with Tailwind CSS.
000Updated 2mo ago
UI Framework
Quick InstallView Source
npm i -D daisyui@latestOverview
About This Skill
daisyUI 5 is a CSS component library built for Tailwind CSS 4 that provides semantic class names for common UI components. It streamlines UI development by offering pre-designed components that integrate seamlessly with Tailwind CSS, reducing the need to write custom styles from scratch. This skill is suitable for developers who want to accelerate their design workflow while maintaining consistency across their web applications.
How to Use
Install using npm and add the daisyUI plugin to your Tailwind CSS configuration.
Use Cases
Building responsive user interfaces using Tailwind CSS
Enhancing existing Tailwind CSS projects with semantic UI components
Creating modern and accessible web applications
Tags
Setup & Installation
Quick Install
Terminal
npm i -D daisyui@latestAlternative Install (Git Clone)
git clone https://github.com/nenorrell/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a [COMPANY] [INDUSTRY] dashboard using daisyUI 5 with Tailwind CSS 4. Use semantic class names to create a responsive layout with [COMPONENTS] and [DATA]. Ensure the design follows modern UI trends and includes interactive elements like buttons and cards.
Example Output
# Modern Dashboard with daisyUI 5
## 📊 Overview
- **Total Users**: 12,487
- **Revenue**: $456,789 (Q3 2024)
- **Conversion Rate**: 12.5%
## 🚀 Quick Actions
```html
<button class="btn btn-primary">Add New User</button>
<button class="btn btn-ghost">View Reports</button>
```
## 📈 Performance Metrics
```html
<div class="stats shadow">
<div class="stat">
<div class="stat-title">Downloads</div>
<div class="stat-value">1,200</div>
<div class="stat-desc">↗️ 12% more than last month</div>
</div>
</div>
```
## 🎨 Themed Components
- **Dark Mode**: Toggle with `data-theme="dark"`
- **Card Grid**: Uses `card` and `card-bordered`
- **Navigation**: `navbar` with dropdown menus
---
*Built with daisyUI 5 + Tailwind CSS 4*Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan