Pico-Daisy UI - Complete Demo

📊 Stats Component

12,847

Total Users

89.2%

Satisfaction Rate

99.8%

Uptime

3.2s

Avg Response Time

<div class="daisy-stats">
  <div class="daisy-stat">
    <div class="daisy-stat-value">12,847</div>
    <div class="daisy-stat-title">Total Users</div>
  </div>
  <!-- More stats... -->
</div>

⚠️ Alert Components

ℹ

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>Information message</div>
</div>

<div class="daisy-alert alert-success">
  <span>✓</span>
  <div>Success message</div>
</div>

💬 Chat Bubbles

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. What would you like to know?

How easy is it to customize the theme colors?

<div class="daisy-chat">
  <div class="chat-message chat-start">
    <div class="chat-bubble">
      Left aligned message
    </div>
  </div>
  <div class="chat-message chat-end">
    <div class="chat-bubble">
      Right aligned message
    </div>
  </div>
</div>

🃏 Card Components

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

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>
<span class="badge badge-secondary">Secondary</span>

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

📝 Form Elements

First Name Last Name

Email Address Password Must be at least 8 characters long Bio Country

Preferences Subscribe to newsletter I agree to the terms and conditions

<!-- Example form field -->
<label for="email">
  Email Address
  <input type="email" id="email" placeholder="john@example.com">
</label>

<!-- Checkbox with switch role -->
<label for="newsletter">
  <input type="checkbox" id="newsletter" role="switch">
  Subscribe to newsletter
</label>

📈 Chart Wrappers

Website Analytics

Monthly traffic and engagement metrics

📊

Chart.js / ApexCharts / Other Library

Your chart visualization would render here

Organic Traffic

Direct Traffic

Referral Traffic

Social Media

<div class="daisy-chart-wrapper">
  <div class="daisy-chart-header">
    <h3 class="daisy-chart-title">Chart Title</h3>
    <div class="daisy-chart-toolbar">
      <button class="chart-toolbar-btn active">1M</button>
    </div>
  </div>
  
  <!-- Your chart goes here -->
  <canvas id="myChart"></canvas>
  
  <div class="daisy-chart-legend">
    <div class="legend-item">
      <span class="legend-color primary"></span>
      <span>Dataset 1</span>
    </div>
  </div>
</div>

Loading State

Loading chart data...

Empty State

📈

No Data Available

Start collecting data to see your chart here.

🎨 Color Palette

Primary Colors

Primary #570df8

Hover #460ac6

Focus rgba(87, 13, 248, 0.25)

Theme Colors

Secondary #f000b8

Accent #37cdbe

Background

🌙 Dark Mode

The theme automatically supports system preference dark mode. You can also toggle it manually:

<!-- 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);
    
    // Update button text
    const button = document.querySelector('.theme-toggle');
    button.textContent = `Switch to ${currentTheme === 'dark' ? 'Dark' : 'Light'}`;
}