Pico-Daisy UI

A beautiful DaisyUI-inspired theme for PicoCSS v2. All the simplicity of PicoCSS with the aesthetic beauty of DaisyUI.

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.

Hero Variants

Versatile layouts for your landing page.

Tech Office

Modern 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>Modern 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);
}