DaisyUI

Difficulty:
Framework
DaisyUI Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Prompt

Depth is expressed through soft, low-contrast shadows.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

daisyUI adds a semantic component layer on top of Tailwind: class names like btn, card, navbar, and drawer build common structures, 30+ built-in themes switch instantly, and the default palette leads with purple (#570DF8) alongside magenta and teal. Rounded 0.5rem corners, soft shadows, pastel surfaces, and clear hover states mean almost zero custom CSS — ideal for teams wanting Tailwind's freedom with component semantics.

DaisyUIFramework

Prompt Template

Base Template
Design a daisyUI-inspired interface. - Semantic component classes on top of Tailwind: btn, card, navbar, drawer; - Theme system with 30+ built-in themes; light default primary #570DF8; - Rounded corners (0.5rem), soft shadows, pastel surfaces; - Friendly, approachable components with clear hover states; - Zero custom CSS — pure utility classes. Colors: #570DF8, #F000B8, #37CDBE, #FFFFFF with #570DF8 accent. Typography: system-ui.

Variant Prompts

📱 Mobile
Design a mobile app with DaisyUI aesthetics. Use DaisyUI color identity with #570DF8 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with DaisyUI style. Use DaisyUI color identity with #570DF8 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with DaisyUI design language. Use DaisyUI color identity with #570DF8 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with DaisyUI visual identity. Use DaisyUI color identity with #570DF8 accents. Compelling, conversion-focused.

Usage Examples

DaisyUI Landing Page

Landing
Build a landing page with daisyUI style: hero section, feature cards, and navbar using semantic Tailwind classes and #570DF8 accent.

DaisyUI Admin Panel

Dashboard
Create an admin panel with daisyUI design language: drawer navigation, stat cards, and theme switcher with #570DF8 color system.

✅ Best For

  • Tailwind CSS
  • Rapid prototyping
  • Theme switching

❌ Avoid For

  • Teams wanting native CSS component libraries
  • Projects with deeply custom component behavior

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download