Navigation - Pico-Daisy Components

Accordion (Classless)

Just use <details> and <summary> - fully styled with no classes!

What is Pico-Daisy?

Pico-Daisy is a premium CSS theme for PicoCSS v2 that adds DaisyUI-style components with glassmorphism, gradients, and smooth animations - all while maintaining a classless-first approach.

Do I need JavaScript?

No! All components work with pure HTML and CSS. The native <details> element handles the accordion behavior.

How do I customize colors?

Override the CSS custom properties like --daisy-primary, --daisy-secondary, etc. in your own stylesheet.

<details open>
                <summary>Question here?</summary>
                <p>Answer goes here...</p>
                </details>

                <details>
                <summary>Another question?</summary>
                <p>Another answer...</p>
                </details>
            

Modal Dialog (Classless)

The native <dialog> element is beautifully styled.

<dialog id="my-modal">
                <header><h3>Title</h3></header>
                <p>Content here...</p>
                <footer>
                <button onclick="this.closest('dialog').close()">Close</button>
                </footer>
                </dialog>

                <button onclick="document.getElementById('my-modal').showModal()">
                Open Modal
                </button>
            

Chat Bubbles

Simple chat message layout with minimal classes.

Hey! How's it going?

Pretty good! Working on the new design 🎨

That sounds exciting! Can't wait to see it.

<div class="chat-message chat-start">
                <div class="chat-bubble">Hello!</div>
                </div>

                <div class="chat-message
                    chat-end">
                <div class="chat-bubble">Hi there!</div>
                </div>
            

Dividers

Text dividers with .divider class.

OR

Continue with

<div class="divider"></div>
                <div class="divider">OR</div>
                <div class="divider">Continue with</div>
            

Steps Indicator

Show progress through a multi-step process.

Account

Profile

Complete

<div class="daisy-steps">
                <div class="daisy-step
                    daisy-step-complete">Done</div>
                <div class="daisy-step
                    daisy-step-active">Current</div>
                <div class="daisy-step">Pending</div>
                </div>
            

Navigation & Layout

Accordion (Classless)

Modal Dialog (Classless)

Modal Title

Chat Bubbles

Dividers

Steps Indicator