daisy-ui

Instructions

Follow documentation from ./llms.txt to produce code that uses DaisyUI components and themes according to the project's tech stack and coding standards outlined in the main CLAUDE.md file.

Theme Customization

Configure DaisyUI theme in

tailwind.config.js

for Williamstown SC brand identity:

Primary Colors

```
primary
```
: #062174 (Club blue - traditional, trustworthy)
```
secondary
```
: #DEB100 (Club yellow/gold - energy, visibility)
```
accent
```
: #10B981 (Green - soccer field aesthetic)
```
neutral
```
: #1F2937 (Dark gray for text)
```
base-100
```
: #FFFFFF (White backgrounds)
```
base-200
```
: #F3F4F6 (Light gray backgrounds)
```
base-300
```
: #E5E7EB (Medium gray borders)

Typography Guidelines

Use
```
font-sans
```
with system fonts or Inter
Ensure minimum 16px base font size for accessibility
Apply proper line-height (1.5+ for body text)
Use font-weight variations: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)

Theme Configuration Example

// tailwind.config.js
module.exports = {
	plugins: [require('daisyui')],
	daisyui: {
		themes: [
			{
				williamstown: {
					primary: '#062174', // Club blue
					'primary-content': '#FFFFFF',
					secondary: '#DEB100', // Club gold
					'secondary-content': '#000000',
					accent: '#10B981', // Soccer green
					'accent-content': '#FFFFFF',
					neutral: '#1F2937',
					'neutral-content': '#FFFFFF',
					'base-100': '#FFFFFF', // White
					'base-200': '#F3F4F6', // Light gray
					'base-300': '#E5E7EB', // Medium gray
					'base-content': '#1F2937',
					info: '#3ABFF8',
					'info-content': '#000000',
					success: '#36D399',
					'success-content': '#000000',
					warning: '#FBBD23',
					'warning-content': '#000000',
					error: '#F87272',
					'error-content': '#000000'
				}
			}
		]
	}
};

Component Selection

Use DaisyUI Components For

Navigation & Menus:

```
navbar
```
- Top navigation bar
```
menu
```
- Vertical/horizontal menu lists
```
dropdown
```
- Dropdown menus
```
drawer
```
- Mobile slide-out navigation
```
breadcrumbs
```
- Page navigation trail

Actions:

```
btn
```
- Buttons with variants (btn-primary, btn-secondary, btn-ghost, btn-outline)
```
btn-group
```
- Grouped button sets
```
swap
```
- Toggle/swap icons (menu hamburger)
```
link
```
- Styled links

Data Display:

```
card
```
- Content cards for news, fixtures, players
```
badge
```
- Labels and tags
```
avatar
```
- Profile pictures
```
stat
```
- Statistics display (goals, wins, etc.)
```
table
```
- Data tables for fixtures/results
```
timeline
```
- Match history timeline

Forms:

```
input
```
- Text inputs with validation states
```
textarea
```
- Multi-line text
```
select
```
- Dropdown select
```
checkbox
```
- Checkboxes
```
radio
```
- Radio buttons
```
toggle
```
- Toggle switches
```
range
```
- Range sliders
```
file-input
```
- File upload

Feedback:

```
alert
```
- Notifications and messages
```
modal
```
- Modal dialogs
```
toast
```
- Toast notifications
```
loading
```
- Loading spinners
```
skeleton
```
- Loading skeletons
```
progress
```
- Progress bars

Layout:

```
divider
```
- Section dividers
```
stack
```
- Vertical stacking
```
join
```
- Join elements together
```
indicator
```
- Notification indicators

Use Custom Tailwind For

Hero sections with glassmorphism effects
Complex asymmetric layouts
Custom animations and transitions
Grid-breaking designs from frontend-design skill
Unique spacing patterns
Advanced visual effects (backdrop-blur, gradients)

Accessibility Patterns

WCAG AA Compliance

Color Contrast:
- DaisyUI automatically ensures contrast for text/background combinations
- Verify custom colors meet 4.5:1 ratio for normal text
- Verify custom colors meet 3:1 ratio for large text (18px+)
Touch Targets:
- Use
```
btn-lg
```
  for primary CTAs (ensures 44x44px minimum)
- Default
```
btn
```
  is 48px height (meets requirements)
- Use
```
btn-sm
```
  sparingly, only for secondary actions

Form Accessibility:

jsx

<label className="form-control w-full">
	<div className="label">
		<span className="label-text">Email address</span>
	</div>
	<input
		type="email"
		placeholder="you@example.com"
		className="input input-bordered w-full"
		aria-required="true"
	/>
	<div className="label">
		<span className="label-text-alt">We'll never share your email</span>
	</div>
</label>

Focus States:
- DaisyUI includes visible focus indicators by default
- Test all interactive elements with keyboard navigation
- Use
```
focus:
```
  variants for custom styling
Semantic HTML:
- DaisyUI components use proper semantic HTML
- Add ARIA labels where needed:
```
aria-label
```
  ,
```
aria-describedby
```
- Use
```
role
```
  attribute for custom components

Common Patterns for Sports Clubs

Match/Fixture Card

jsx

<div className="card bg-base-100 shadow-xl">
	<div className="card-body">
		<div className="flex items-center justify-between">
			<h3 className="card-title text-lg">Round 5</h3>
			<div className="badge badge-primary">Home</div>
		</div>
		<div className="my-4 flex items-center justify-between">
			<div className="flex-1 text-center">
				<p className="text-xl font-bold">Williamstown SC</p>
			</div>
			<div className="px-4 text-center">
				<p className="text-3xl font-bold">2 - 1</p>
			</div>
			<div className="flex-1 text-center">
				<p className="text-xl font-bold">Opposition FC</p>
			</div>
		</div>
		<div className="card-actions justify-end">
			<button className="btn btn-ghost">Match Report</button>
		</div>
	</div>
</div>

News Card

jsx

<div className="card bg-base-100 shadow-xl">
	<figure>
		<img src="/news-image.jpg" alt="News headline" />
	</figure>
	<div className="card-body">
		<div className="flex gap-2">
			<div className="badge badge-secondary">News</div>
			<div className="badge badge-outline">Senior Men</div>
		</div>
		<h2 className="card-title">2026 Senior Men's Coaching Team</h2>
		<p>Exciting announcement about our coaching lineup for the upcoming season...</p>
		<div className="card-actions mt-4 items-center justify-between">
			<span className="text-base-content/70 text-sm">2 days ago</span>
			<button className="btn btn-primary">Read More</button>
		</div>
	</div>
</div>

Navigation Header

jsx

<div className="navbar bg-primary text-primary-content">
	<div className="navbar-start">
		<div className="dropdown">
			<button tabIndex={0} className="btn btn-ghost lg:hidden">
				<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path
						strokeLinecap="round"
						strokeLinejoin="round"
						strokeWidth={2}
						d="M4 6h16M4 12h8m-8 6h16"
					/>
				</svg>
			</button>
			<ul
				tabIndex={0}
				className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
			>
				<li>
					<a>HOME</a>
				</li>
				<li>
					<a>ABOUT</a>
				</li>
				<li>
					<a>FIXTURES</a>
				</li>
			</ul>
		</div>
		<a className="btn btn-ghost text-xl">WILLIAMSTOWN SC</a>
	</div>
	<div className="navbar-center hidden lg:flex">
		<ul className="menu menu-horizontal px-1">
			<li>
				<a>HOME</a>
			</li>
			<li>
				<a>ABOUT</a>
			</li>
			<li>
				<a>MEMBER INFO</a>
			</li>
			<li>
				<a>FIXTURES</a>
			</li>
			<li>
				<a>CALENDAR</a>
			</li>
			<li>
				<a>CONTACT</a>
			</li>
			<li>
				<a>SHOP</a>
			</li>
		</ul>
	</div>
	<div className="navbar-end">
		<button className="btn btn-ghost btn-circle">
			<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					strokeWidth={2}
					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
				/>
			</svg>
		</button>
	</div>
</div>

Player Card

jsx

<div className="card card-compact bg-base-100 shadow-xl">
	<figure>
		<img src="/player-photo.jpg" alt="Player name" className="h-64 w-full object-cover" />
	</figure>
	<div className="card-body">
		<div className="flex items-start justify-between">
			<div>
				<h3 className="card-title">John Smith</h3>
				<p className="text-base-content/70 text-sm">Midfielder</p>
			</div>
			<div className="badge badge-lg badge-primary">15</div>
		</div>
		<div className="stats stats-vertical mt-2 shadow">
			<div className="stat p-2">
				<div className="stat-title text-xs">Appearances</div>
				<div className="stat-value text-lg">24</div>
			</div>
			<div className="stat p-2">
				<div className="stat-title text-xs">Goals</div>
				<div className="stat-value text-lg">8</div>
			</div>
		</div>
	</div>
</div>

Event Card

jsx

<div className="card bg-base-100 shadow-xl">
	<div className="card-body">
		<div className="flex items-start gap-4">
			<div className="text-center">
				<div className="text-primary text-4xl font-bold">15</div>
				<div className="text-base-content/70 text-sm">NOV</div>
			</div>
			<div className="flex-1">
				<h3 className="card-title">Season Launch Event</h3>
				<p className="text-base-content/70 mb-2 text-sm">6:00 PM - 9:00 PM</p>
				<p>Join us for the official 2026 season launch with the new coaching team...</p>
				<div className="card-actions mt-4 justify-end">
					<button className="btn btn-primary">RSVP</button>
				</div>
			</div>
		</div>
	</div>
</div>

Responsive Utilities

Breakpoint Classes

Use DaisyUI's responsive modifiers with Tailwind breakpoints:

jsx

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

// Card layout
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards adapt to screen size */}
</div>

// Navigation drawer (mobile)
<div className="drawer lg:drawer-open">
  <input id="drawer" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content">
    {/* Page content */}
  </div>
  <div className="drawer-side">
    {/* Sidebar menu */}
  </div>
</div>

Mobile-First Patterns

jsx

// Hide on mobile, show on desktop
<div className="hidden lg:block">Desktop Menu</div>

// Show on mobile, hide on desktop
<div className="lg:hidden">Mobile Menu</div>

// Collapse for accordion on mobile
<div className="collapse lg:collapse-open">
  <input type="checkbox" />
  <div className="collapse-title">Click to expand</div>
  <div className="collapse-content">Content</div>
</div>

Form Validation States

jsx

// Success state
<input
  type="text"
  className="input input-bordered input-success w-full"
  defaultValue="valid@email.com"
/>

// Error state
<input
  type="text"
  className="input input-bordered input-error w-full"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" className="text-error text-sm">
  Please enter a valid email address
</span>

// Warning state
<input
  type="text"
  className="input input-bordered input-warning w-full"
/>

// Disabled state
<input
  type="text"
  className="input input-bordered w-full"
  disabled
/>

Loading States

jsx

// Button loading
<button className="btn btn-primary">
  <span className="loading loading-spinner"></span>
  Loading...
</button>

// Skeleton loader
<div className="flex flex-col gap-4">
  <div className="skeleton h-32 w-full"></div>
  <div className="skeleton h-4 w-28"></div>
  <div className="skeleton h-4 w-full"></div>
  <div className="skeleton h-4 w-full"></div>
</div>

// Card skeleton
<div className="card bg-base-100 shadow-xl">
  <div className="skeleton h-48 w-full"></div>
  <div className="card-body">
    <div className="skeleton h-4 w-3/4"></div>
    <div className="skeleton h-4 w-1/2"></div>
  </div>
</div>

Modal Patterns

jsx

// Basic modal
<dialog id="my_modal" className="modal">
  <div className="modal-box">
    <h3 className="font-bold text-lg">Match Report</h3>
    <p className="py-4">Detailed match information goes here...</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

// Modal with backdrop
<dialog id="my_modal_2" className="modal modal-bottom sm:modal-middle">
  <div className="modal-box">
    <h3 className="font-bold text-lg">Confirm Action</h3>
    <p className="py-4">Are you sure you want to proceed?</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn btn-ghost">Cancel</button>
        <button className="btn btn-primary">Confirm</button>
      </form>
    </div>
  </div>
  <form method="dialog" className="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

Performance Considerations

Bundle Size

DaisyUI adds approximately 25KB gzipped to your bundle
Components are CSS-only (no JavaScript overhead)
Use Tailwind's JIT mode for optimal bundle size
Purge unused styles in production

Optimization Tips

// tailwind.config.js - Limit DaisyUI themes for smaller bundle
daisyui: {
  themes: ['williamstown'], // Only include what you need
  darkTheme: false,          // Disable if not using dark mode
  base: true,
  styled: true,
  utils: true,
}

Tree Shaking

DaisyUI components are automatically tree-shaken when not used. Only include components you actually reference in your HTML/JSX.

Combining DaisyUI with Custom Styles

When to Mix

jsx

// DaisyUI component with custom Tailwind
<div className="card bg-base-100 shadow-xl backdrop-blur-xl bg-opacity-80">
  <div className="card-body">
    {/* Glassmorphism effect added to DaisyUI card */}
  </div>
</div>

// DaisyUI with custom animations
<button className="btn btn-primary hover:scale-105 transition-transform duration-200">
  Hover Me
</button>

Extending DaisyUI Components

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			// Add custom animations
			animation: {
				'fade-in': 'fadeIn 0.3s ease-in'
			},
			keyframes: {
				fadeIn: {
					'0%': { opacity: '0', transform: 'translateY(10px)' },
					'100%': { opacity: '1', transform: 'translateY(0)' }
				}
			}
		}
	}
};

Component Composition

Building Complex Components

jsx

// Fixture list with stats
const FixtureList = () => (
	<div className="overflow-x-auto">
		<table className="table-zebra table">
			<thead>
				<tr>
					<th>Date</th>
					<th>Home</th>
					<th>Score</th>
					<th>Away</th>
					<th>Status</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Nov 15</td>
					<td className="font-bold">Williamstown SC</td>
					<td className="text-center">2 - 1</td>
					<td>Opposition FC</td>
					<td>
						<div className="badge badge-success">Win</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
);

Best Practices

Always use semantic HTML - DaisyUI builds on proper semantic elements
Test keyboard navigation - Ensure all interactive elements are keyboard accessible
Verify color contrast - Use tools to check WCAG compliance
Use consistent spacing - Stick to Tailwind's spacing scale (p-4, gap-4, etc.)
Leverage data-theme - Apply theme to container elements:
```
<div data-theme="williamstown">
```
Mobile-first design - Start with mobile styles, add responsive modifiers
Avoid !important - Use Tailwind's specificity instead
Document custom variants - Keep track of custom component combinations

Common Pitfalls

❌ Don't:

Mix inline styles with DaisyUI classes
Override DaisyUI CSS variables without understanding the system
Create custom components when DaisyUI has a solution
Ignore accessibility features built into components

✅ Do:

Use DaisyUI's theme system for customization
Extend with Tailwind utilities when needed
Test components across breakpoints
Maintain consistent spacing and sizing
Follow the component composition patterns above

Quick Reference

Component Class Patterns

Button:     btn btn-{variant} btn-{size}
Card:       card card-{variant}
Input:      input input-{variant} input-{size}
Badge:      badge badge-{variant} badge-{size}
Alert:      alert alert-{variant}
Modal:      modal modal-{position}

Color Variants

primary, secondary, accent, neutral, info, success, warning, error, ghost

Size Modifiers

xs, sm, md (default), lg, xl

State Modifiers

disabled, loading, active, focus

daisy-ui

NPX Install

Tags

SKILL.md Content

daisy-ui

Instructions

Theme Customization

Primary Colors

Typography Guidelines

Theme Configuration Example

Component Selection

Use DaisyUI Components For

Use Custom Tailwind For

Accessibility Patterns

WCAG AA Compliance

Common Patterns for Sports Clubs

Match/Fixture Card

News Card

Navigation Header

Player Card

Event Card

Responsive Utilities

Breakpoint Classes

Mobile-First Patterns

Form Validation States

Loading States

Modal Patterns

Performance Considerations

Bundle Size

Optimization Tips

Tree Shaking

Combining DaisyUI with Custom Styles

When to Mix

Extending DaisyUI Components

Component Composition

Building Complex Components

Best Practices

Common Pitfalls

Quick Reference

Component Class Patterns

Color Variants

Size Modifiers

State Modifiers