Daisy Ui

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

1. 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+)

2. 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

3. Form Accessibility:

   <label className="form-control w-full">
   	<div className="label">
   		<span className="label-text">Email address</span>
   	</div>
   	<input
   		type="email"
   		placeholder="[email protected]"
   		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>
   

4. Focus States:

   • DaisyUI includes visible focus indicators by default
   • Test all interactive elements with keyboard navigation
   • Use focus: variants for custom styling

5. 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

<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

<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

<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

<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

<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:

// 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

// 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

// Success state
<input
  type="text"
  className="input input-bordered input-success w-full"
  defaultValue="[email protected]"
/>

// 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

// 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

// 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