Self-contained · one file

Plain HTML, DaisyUI look.

Pico-Daisy vendors PicoCSS itself, so a single stylesheet gives semantic HTML a violet, DaisyUI-inspired theme — dark mode and 7 color variants included. A small set of opt-in classes covers what plain HTML can't express: badges, alerts, avatars, and a few more.

See the components View on GitHub

Buttons

Variants

.secondary, .outline and .contrast are native PicoCSS classes. .btn-ghost is the one variant Pico-Daisy adds.

Loading state uses native aria-busy="true" — no extra class needed.

Badges & tooltips

Default Primary Success Warning Error Info

Soft primary Soft success Soft warning Soft error

Hover for a tooltip

Layout & data

Cards

Interactive card

Any <article> is already a themed card via PicoCSS. Add .card-hover for a lift-on-hover interaction.

Accordion

Is this fully responsive?

Yes — it's built entirely on Pico's own grid and fluid typography.

How do I install it?

Link the single CSS file. No build step, no second stylesheet, no CDN dependency.

Stats

1,204

Daily users

89%

Satisfaction

4.9/5

Rating

Forms & inputs

Modern inputs

Controls

Permissions Read access Write access

Notifications Email Push

Enable dark mode by default

Feedback & elements

Alerts

Update: Version 3.0 is available.

Saved: Your changes were saved successfully.

Warning: Your plan expires in 3 days.

Error: Could not reach the server.

Avatars & misc

Avatar group

Progress

Text

Press Cmd + K to search. Here's some highlighted text.