daisyUI Components for Leptos

This crate is a daisyUI 5 components library for Leptos, providing type-safe, reactive wrappers for daisyUI 5 components.

""At present, it is assumed to be used for CSR.""

🚧 Work in Progress
This project is currently under active development.
The design and usage are still evolving, and breaking changes can be expected.
Feedback is welcome!

How to use

Install

Include this crate in your dependencies.

cargo add leptos-daisyui-rs

Code

You can use components as follows: Tailwind CSS (v4) is used, so you can insert additional classes.

use leptos-daisyui-rs as daisyui'

use daisyui:components:::Accordion;

#[components]
fn Demo () -> impl IntoView {
    view! {
        <Accordion name="demo" checked=Signal::new(true) class="bg-base-100">
            <AccordionTitle class="text-lg">{"Accordion Title"}</AccordionTitle>
            <AccordionContent class="p-4">
                {"This is the content of the accordion. It can be any HTML content."}
            </AccordionContent>
        </Accordion>
    }
}

CSS Install

As a note at build time, since the class names included in daisyUI are included in the crate, please refer to each component you use inline as follows.

@import "tailwindcss";
@plugin "daisyui";
@source "../src/**/*.rs";

/* Accordion */
@source inline("collapse collapse-title collapse-content collapse-arrow collapse-plus collapse-open collapse-close");

If you want to include everything first [daisyui-components.css](. /stytles/daisyui-components.css).

🚧 There is room for optimization I still refer to class names by force in this area, so in the future I would like to include only the classes used in the build.

How to Code

This section describes a more in-depth implementation.

Wrapper Components

Basically, this library implements a component that wraps a simple HTML element and hides the design part of daisyUI inside.

Therefore, it is designed to be flexible enough to add attributes and event listeners to the top HTML element using Spread (Leptos Book) .

For example, take a look at the following Button component:

use leptos::prelude::*;
use leptos::html::{Button as HTMLButton};
use leptos_daisyui_rs::components::*;;


let active = Signal::derive(move || some_condition());
let node_ref = NodeRef::<HTMLButton>::new();

// It is also possible to access the DOM API directly through NodeRef.
Effect::new(move || {
    let node_ref = node_ref.clone();
    let button = node_ref.get();
    if let Some(button) = button {
        if button.check_validity() {
            log::info!("Button is valid");
        } else {
            log::warn!("Button is invalid");
        }
    }
});

...

<Buttton
    // This is already defined as a property.
    color=ButtonColor::Neutral
    shape=ButtonShape::Square
    active=active
    node_ref=node_ref
    class="my-custom-class"

    // Attributes of the Top HTML element can be added using the `attr` modifier.
    //
    // - HTMLButtonElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement
    // - HTMLElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
    attr:name="my-button"
    attr:r#tytpe="button"

    // You can also add style or class attributes using the `class` and `style` modifiers.
    //
    // - Leptos ClassAttribute: https://docs.rs/leptos/latest/leptos/attr/global/trait.ClassAttribute.html
    // - Leptos StyleAttribute: https://docs.rs/leptos/latest/leptos/attr/global/trait.StyleAttribute.html
    class:btn=true
    style:font="normal"
    class:btn-block=true

    // Of course, event listeners belonging to Element can be added using the `on` modifier.
    //
    // - Leptos OnAttribute: https://docs.rs/leptos/latest/leptos/attr/global/trait.OnAttribute.html
    // - Leptos GlobalOnAttribute: https://docs.rs/leptos/latest/leptos/attr/global/trait.GlobalOnAttributes.html
    on:click=move |ev| {
        // Handle click event
        log::info!("Button clicked: {:?}", ev);
    }

    // You can also add custom properties using the `prop` modifier.
    //
    // Leptos PropAttribute: https://docs.rs/leptos/latest/leptos/attr/global/trait.PropAttribute.html
    prop:command="show-popover"
>
    "Button!"
</Buttton>

What you can't do

While the above consists of top HTML elements that match daisyUI components to some degree, the CSS design should be more flexible than it should be. For example, we think it would be good to have a link (anchor tag) with a Button design.

If you would like to use the same design but use the internal configuration HTML elements, we would be glad to receive your contribution!!

As a workaround, a wrapper component that only assigns attributes to child components can be considered. For example

use leptos::prelude::*;
use leptos::tachys::html::class::class as class_fn;

#[component]
pub fn FullWrapperButton(children: Children) -> impl IntoView {
    // It can be added without overwriting it by making it a conditional class.
    children().add_any_attr(class_fn(("btn", true)))
}

...

<FullWrapperButton>
    <a href="/some-link">
        "Link Button"
    </a>
</FullWrapperButton>

<FullWrapperButton>
    <button>
        "Button"
    </button
</FullWrapperButton>

Implementation Status

Progress: 56/57 components implemented

TODO utility

• utility hooks
  • toggle
  • validator
  • modal
  • popover
  • etc ...
• utility provder
  • Theme controller
  • Toast Manager
  • etc ...