skills.rest
natelandau
natelandauCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

daisyui

Build user interfaces with daisyUI v5 components, forms, and Tailwind CSS theming.

Updated May 9, 2026
Search Tags:#theming#frontend#responsive design#tailwind css#forms#ui components#daisyui
One-click install
npx skills add https://github.com/natelandau/cc-plugin --skill daisyui-natelandau
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui
Source: https://github.com/natelandau/cc-plugin/tree/main/plugins/natelandau-toolkit/skills/daisyui
Command: npx skills add https://github.com/natelandau/cc-plugin --skill daisyui-natelandau

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires daisyui, and includes references (resource) components.

What problem does it solve? Building consistent, themeable UIs with daisyUI v5 requires knowing its semantic class system and the breaking changes from v4, such as the new fieldset-based form structure and the removal of -bordered suffixes. This Skill provides the correct v5 patterns so generated markup works on the first try. ## Core Features & Use Cases - Component Patterns: Ready-to-use markup for buttons, cards, modals, tables, navbars, drawers, alerts, and more across all daisyUI component categories. - v5 Form Structure: Correct fieldset/fieldset-legend form patterns with validator classes, select and textarea rules, and a v4-to-v5 migration table of common mistakes. - Theming & Responsive Design: Theme configuration via data-theme attributes, 30+ built-in themes, and Tailwind responsive prefix usage. - Use Case: When asked to build a settings page with a validated form and a responsive navbar, the Skill supplies the exact v5 markup, including the Tailwind forms plugin double-focus-ring fix. ## Quick Start Use the daisyui skill to build a responsive contact form with validated email input and a themed submit button.

Frequently Asked Questions about daisyui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a form in daisyUI v5?▼

Wrap each field in a fieldset element with a fieldset-legend for the label. Place inputs inside a label with class "input w-full" and give the input element class "grow". Add the validator class for automatic validation UI and use a p element with class "label" for helper text.

What changed from daisyUI v4 to v5?▼

The form-control and label-text pattern was replaced by fieldset and fieldset-legend. The -bordered suffix was removed since borders are now default, btm-nav became dock, and inputs use a label wrapper with class "input" while the input element itself gets class "grow".

How do I install daisyUI with Tailwind CSS?▼

Run npm install -D daisyui@latest, then add require("daisyui") to the plugins array in tailwind.config.js. CDN and other installation options are covered in the official daisyUI install documentation.

Why do daisyUI inputs show a double focus ring?▼

The @tailwindcss/forms plugin conflicts with daisyUI input styling and causes a double focus ring. Fix it by adding CSS that applies an outline to .input:has(input:focus) and removes the outline and box-shadow from the inner input element.

How do I change themes in daisyUI?▼

Set the data-theme attribute on the html element, for example data-theme="cupcake". daisyUI ships with over 30 built-in themes including light, dark, synthwave, and nord, and custom themes can be created via the themes documentation.

Related Skills

Explore More Software Engineering Skills→
eminboydakeminboydak

daisyui-install

Installs and configures daisyUI 5 with Tailwind CSS 4 across frameworks and CDN setups.

Community
Basic
SS2608-devSS2608-dev

livewire-development

Develop reactive Livewire 3 components with wire: directives in Laravel applications.

Community
Intermediate
tech-with-sethtech-with-seth
4

add-chart

Implement reusable visx chart components with DaisyUI theming for React dashboards.

Official
Intermediate
JoaquimCassanoJoaquimCassano
1

daisyui

Provide DaisyUI component classes for Tailwind CSS interfaces.

Community
Intermediate