Rustelo/info/daisyui_integration.md

DaisyUI Integration Guide

This document explains how DaisyUI has been integrated into this Rust web application template using UnoCSS.

Overview

DaisyUI is a semantic component library built on top of Tailwind CSS that provides pre-built components like buttons, cards, modals, and more. This project integrates DaisyUI using the unocss-preset-daisy preset, which allows you to use DaisyUI components with UnoCSS instead of Tailwind CSS.

Installation

DaisyUI has been integrated using the following steps:

1. Installed the preset: unocss-preset-daisy package
2. Updated UnoCSS configuration: Added the DaisyUI preset to uno.config.ts
3. Created example components: Added comprehensive examples in client/src/components/daisy_example.rs
4. Added route: Created /daisyui route to showcase the components

Configuration

The DaisyUI preset is configured in uno.config.ts:

import { presetDaisy } from "unocss-preset-daisy";

export default defineConfig({
  // ... other config
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      autoInstall: true,
      collections: {
        carbon: () =>
          import("@iconify-json/carbon/icons.json").then((i) => i.default),
      },
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
    presetDaisy(), // DaisyUI preset
  ],
  // ... other config
});

Available Components

The integration includes all standard DaisyUI components:

Buttons

• btn - Basic button
• btn-primary, btn-secondary, btn-accent - Colored buttons
• btn-outline - Outline buttons
• btn-ghost, btn-link - Ghost and link buttons
• btn-lg, btn-md, btn-sm, btn-xs - Button sizes

Cards

• card - Basic card container
• card-body - Card content area
• card-title - Card title
• card-actions - Card action buttons area

Forms

• form-control - Form control wrapper
• label - Form labels
• input - Text inputs with input-bordered variant
• select - Select dropdowns with select-bordered variant
• checkbox - Checkboxes
• radio - Radio buttons

Feedback

• alert - Alert messages with variants: alert-info, alert-success, alert-warning, alert-error
• badge - Small status indicators with color variants
• progress - Progress bars with color variants
• loading - Loading spinners and dots

Navigation

• tabs - Tab navigation with tab-lifted variant
• modal - Modal dialogs with modal-box content

Layout

• hero - Hero sections with hero-content
• container - Container for content

Color System

DaisyUI uses a semantic color system:

• Primary Colors: primary, primary-content
• Secondary Colors: secondary, secondary-content
• Accent Colors: accent, accent-content
• Neutral Colors: neutral, neutral-content
• Base Colors: base-100, base-200, base-300, base-content
• State Colors: info, success, warning, error

Usage in Leptos Components

Here's an example of using DaisyUI components in a Leptos component:

use leptos::prelude::*;

#[component]
pub fn ExampleComponent() -> impl IntoView {
    let (count, set_count) = signal(0);

    view! {
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title">"Counter Example"</h2>
                <div class="text-center">
                    <div class="text-4xl font-bold text-primary mb-4">
                        {move || count.get()}
                    </div>
                    <div class="card-actions justify-center">
                        <button 
                            class="btn btn-primary"
                            on:click=move |_| set_count.update(|c| *c += 1)
                        >
                            "Increment"
                        </button>
                        <button 
                            class="btn btn-secondary"
                            on:click=move |_| set_count.set(0)
                        >
                            "Reset"
                        </button>
                    </div>
                </div>
            </div>
        </div>
    }
}

Themes

DaisyUI supports multiple themes. To use a theme, add the data-theme attribute to your HTML:

<html data-theme="dark">
<!-- or -->
<html data-theme="cupcake">

Available themes include:

• light (default)
• dark
• cupcake
• bumblebee
• emerald
• corporate
• synthwave
• retro
• cyberpunk
• valentine
• halloween
• garden
• forest
• aqua
• lofi
• pastel
• fantasy
• wireframe
• black
• luxury
• dracula
• cmyk
• autumn
• business
• acid
• lemonade
• night
• coffee
• winter
• dim
• nord
• sunset

Building and Development

To build the CSS with DaisyUI components:

pnpm run build:css

To watch for changes during development:

pnpm run dev

Example Page

Visit /daisyui to see a comprehensive showcase of all DaisyUI components in action. The example page includes:

• Button variations and sizes
• Card layouts
• Form elements
• Interactive components (modals, counters)
• Alerts and badges
• Progress indicators
• Tab navigation
• Loading states

Customization

You can customize DaisyUI by:

1. CSS Variables: Override DaisyUI's CSS variables in your global styles
2. UnoCSS Shortcuts: Add custom shortcuts in uno.config.ts
3. Theme Customization: Create custom themes using DaisyUI's theme system

Performance

Using unocss-preset-daisy with UnoCSS provides:

• On-demand generation: Only the components you use are included in the final CSS
• Fast builds: UnoCSS's atomic approach ensures fast compilation
• Small bundle size: Optimized CSS output with minimal overhead
• Hot reload: Instant updates during development

Troubleshooting

1. Components not styling: Make sure to run pnpm run build:css after making changes
2. Missing styles: Check that the DaisyUI preset is properly added to uno.config.ts
3. Theme not applying: Ensure the data-theme attribute is set on the HTML element

Resources

• DaisyUI Documentation
• UnoCSS Preset Daisy
• UnoCSS Documentation
• Leptos Documentation

Contributing

To add new DaisyUI components or examples:

1. Add the component to client/src/components/daisy_example.rs
2. Update the menu structure if needed
3. Rebuild the CSS with pnpm run build:css
4. Test the component in the /daisyui route