Pico-Daisy UI

Classless-first CSS theme for PicoCSS v2. Write semantic HTML, get DaisyUI aesthetics. Zero classes needed for most elements.

Pure CSS No JavaScript Responsive MIT Licensed

Installation

Get started with Pico-Daisy UI in seconds.

Use the CDN link or download the CSS file and link it in your HTML <head>.

<!-- Default Theme (Violet) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/josuebrunel/picodaisy@latest/pico-daisy.css">

<!-- Or local file -->
<link rel="stylesheet" href="pico-daisy.css">
<!-- Blue Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/josuebrunel/picodaisy@latest/pico-daisy.blue.css">

<!-- Or local file -->
<link rel="stylesheet" href="pico-daisy.blue.css">
<!-- Red Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/josuebrunel/picodaisy@latest/pico-daisy.red.css">

<!-- Or local file -->
<link rel="stylesheet" href="pico-daisy.red.css">
<!-- Green Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/josuebrunel/picodaisy@latest/pico-daisy.green.css">

<!-- Or local file -->
<link rel="stylesheet" href="pico-daisy.green.css">
<!-- Teal Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/josuebrunel/picodaisy@latest/pico-daisy.teal.css">

<!-- Or local file -->
<link rel="stylesheet" href="pico-daisy.teal.css">
<!-- Light Grey Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/josuebrunel/picodaisy@latest/pico-daisy.light-grey.css">

<!-- Or local file -->
<link rel="stylesheet" href="pico-daisy.light-grey.css">
<!-- Dark Grey Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/josuebrunel/picodaisy@latest/pico-daisy.dark-grey.css">

<!-- Or local file -->
<link rel="stylesheet" href="pico-daisy.dark-grey.css">

Note: Each file includes PicoCSS v2 automatically via @import.

Classless-First Philosophy

Write semantic HTML, get beautiful components. Zero classes for most elements.

Cards = <article>

Automatic Card

This is just an <article> element. No classes needed!

<article>
    <header>Title</header>
    <p>Content</p>
</article>

Accordion = <details>

What's classless-first?

It means semantic HTML elements look great without any CSS classes.

Do I need JavaScript?

No! Pure HTML and CSS. The browser handles interactions.

<details>
    <summary>Question?</summary>
    <p>Answer...</p>
</details>

Alerts = role="alert"

Default info alert
Success message!
Something went wrong
<div role="alert">Info</div>
<div role="alert" data-type="success">OK</div>

Simple Modifiers

When you need customization, use single-word classes:

Article with .glass modifier

Hero Variants

Versatile layouts for your landing page.

Tech Office

Smart Workflow

Optimize your development process with our components. Designed to be flexible, responsive, and easy to integrate. 

<div class="daisy-hero">
  <div class="daisy-hero-content flex-row-reverse">
    <div>
      <img src="image.jpg">
    </div>
    <div>
      <h2>Smart Workflow</h2>
      <p>Optimize your development...</p>
      <button class="primary">Learn More</button>
    </div>
  </div>
</div>

Hero with Overlay

Use an overlay to make text readable on busy background images. 

<!-- Hero with Overlay -->
<div class="daisy-hero" style="background-image: url(bg.jpg);">
  <div class="daisy-hero-overlay"></div>
  <div class="daisy-hero-content">
    <div>
      <h1>Title</h1>
      <p>Description...</p>
    </div>
  </div>
</div>

Stats Component

Display key metrics with style using the responsive stats component.

12.8k
Total Users
89%
Satisfaction
99.9%
Uptime
3.2s
Response
<div class="daisy-stats">
  <div class="daisy-stat">
    <div class="daisy-stat-value">12.8k</div>
    <div class="daisy-stat-title">Total Users</div>
  </div>
  <!-- More stats... -->
</div>

Alert Components

Feedback components for user actions.

ℹ
Information
This is an informational alert with details.
✓
Success!
Your changes have been saved successfully.
⚠
Warning
Please review your configuration settings.
✗
Error
Unable to process your request. Please try again. 
<div class="daisy-alert alert-info">
  <span>ℹ</span>
  <div>
    <strong>Information</strong><br>
    This is an informational alert.
  </div>
</div>

<!-- Alert with close button -->
<div class="daisy-alert alert-success">
  <span>✓</span>
  <div><strong>Success!</strong> Saved successfully.</div>
  <button class="alert-close">×</button>
</div>

Chat Bubbles

Conversation UI elements.

Hey there! How can I help you today?
I'm interested in learning about Pico-Daisy UI components.
Great choice! It combines PicoCSS simplicity with DaisyUI aesthetics. 
<div class="daisy-chat">
  <div class="chat-message chat-start">
    <div class="chat-bubble">Hey there!</div>
  </div>
  <div class="chat-message chat-end">
    <div class="chat-bubble">Hello!</div>
  </div>
</div>

Card Components

Versatile containers for content.

Basic Card

Featured

This is a basic card with the .daisy-card class. It has subtle shadows and a hover effect.

Card with Image

Popular

Cards can contain images, forms, or any other content. The styling remains consistent across all cards. 

<article class="daisy-card">
  <header>
    <h3>Card Title</h3>
    <span class="badge badge-primary">Badge</span>
  </header>
  <p>Card content goes here...</p>
  <footer>
    <button>Action</button>
  </footer>
</article>

Badge Components

Small status indicators.

Solid Badges

Default Primary Secondary Accent Ghost

Outline Badges

Default Primary Secondary Accent 
<!-- Solid Badges -->
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>

<!-- Outline Badges -->
<span class="badge badge-outline">Default</span>
<span class="badge badge-primary badge-outline">Primary</span>

Form Elements

Enhanced form controls with focus states.

Preferences 
<form>
  <div class="grid">
    <label>
      First Name
      <input type="text" placeholder="John" required>
    </label>
    <label>
      Last Name
      <input type="text" placeholder="Doe" required>
    </label>
  </div>
  <label>
    Email
    <input type="email" placeholder="email@example.com">
  </label>
  <fieldset>
    <label>
      <input type="checkbox" role="switch">
      Subscribe to newsletter
    </label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

Chart Wrappers

Containers for your data visualizations.

Website Analytics

Monthly traffic and engagement metrics

📊

Chart.js / ApexCharts / Other Library

Your chart visualization would render here
Organic Traffic
Direct Traffic
Referral Traffic 
<div class="daisy-chart-wrapper">
  <div class="daisy-chart-header">
    <div>
      <h3 class="daisy-chart-title">Analytics</h3>
      <p class="daisy-chart-subtitle">Monthly traffic</p>
    </div>
    <div class="daisy-chart-toolbar">
      <button class="chart-toolbar-btn active">1M</button>
    </div>
  </div>

  <!-- Chart Container -->
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

Steps Component

Progress indicators for multi-step workflows.

  • Register
  • Choose Plan
  • Purchase
  • Receive Product
<ul class="daisy-steps">
  <li class="daisy-step daisy-step-primary">Register</li>
  <li class="daisy-step">Choose Plan</li>
</ul>

Avatar Component

Profile pictures and groups.

Avatar
Alice
Bob
Charlie
+99 
<!-- Single Avatar -->
<div class="daisy-avatar">
  <div style="width: 4rem;">
    <img src="avatar.jpg">
  </div>
</div>

<!-- Avatar Group -->
<div class="daisy-avatar-group">
  <div class="daisy-avatar">...</div>
  <div class="daisy-avatar">...</div>
</div>

Join Component

Group items together seamlessly.

OR
<!-- Input Group -->
<div class="daisy-join">
  <input class="join-item" placeholder="Search...">
  <button class="join-item secondary">Subscribe</button>
</div>

<!-- Button Group -->
<div class="daisy-join">
  <button class="join-item">One</button>
  <button class="join-item">Two</button>
</div>

Divider Component

Visually separate content.

Content A
OR
Content B
<div class="flex flex-col w-full">
  <div>Content A</div>
  <div class="daisy-divider">OR</div>
  <div>Content B</div>
</div>

Tooltips & Loading

Feedback and state indicators.

<!-- Tooltips -->
<div data-tip="Hello!" class="daisy-tooltip-top">
  <button>Hover me</button>
</div>

<!-- Loading Spinners -->
<span class="daisy-loading loading-spinner"></span>
<span class="daisy-loading loading-dots"></span>

Toast Component

Notifications that stack.

New message arrived.
Message sent successfully.

Toasts are fixed positioned by default. The above example is contained for demo purposes. 

<div class="daisy-toast daisy-toast-end daisy-toast-bottom">
  <div class="daisy-alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

Color Palette

The vibrant colors that define the theme.

Primary #570df8
Secondary #f000b8
Accent #37cdbe
Base Auto

Dark Mode

Seamless switching between light and dark themes.

<!-- Set initial theme -->
<html data-theme="dark">

<!-- Or light theme -->
<html data-theme="light">
// Toggle theme function
function toggleTheme() {
    const html = document.documentElement;
    const currentTheme = html.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    html.setAttribute('data-theme', newTheme);
}