Crate leptos_daisyui_rs 

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;

#[component]
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::*;

#[component]
fn ButtonExample() -> impl IntoView {
    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");
            }
        }
    });

    view! {
        <Button
            // 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#type="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!"
        </Button>
    }
}

fn some_condition() -> bool {
    true
}

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)))
}

// Usage example:
#[component]
fn WrapperExample() -> impl IntoView {
    view! {
        <FullWrapperButton>
            <a href="/some-link">
                "Link Button"
            </a>
        </FullWrapperButton>

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

Implementation Status

Component	Status	Source Path	daisyUI Docs
Accordion	✅	src	docs
Alert	✅	src	docs
Avatar	✅	src	docs
Badge	✅	src	docs
Breadcrumbs	✅	src	docs
Button	✅	src	docs
Calendar	✅	src	docs
Card	✅	src	docs
Carousel	✅	src	docs
Chat	✅	src	docs
Checkbox	✅	src	docs
Collapse	✅	src	docs
Countdown	✅	src	docs
Diff	✅	src	docs
Divider	✅	src	docs
Dock	✅	src	docs
Drawer	✅	src	docs
Dropdown	✅	src	docs
FAB (Floating Action Button)	✅	src	docs
Fieldset	✅	src	docs
File Input	✅	src	docs
Filter	✅	src	docs
Footer	✅	src	docs
Hero	✅	src	docs
Hover 3D Card	✅	src	docs
Hover Gallery	✅	src	docs
Indicator	✅	src	docs
Input	✅	src	docs
Join	✅	src	docs
Kbd	✅	src	docs
Label	✅	src	docs
Link	✅	src	docs
List	✅	src	docs
Loading	✅	src	docs
Mask	✅	src	docs
Menu	✅	src	docs
Mockup Browser	✅	src	docs
Mockup Code	✅	src	docs
Mockup Phone	✅	src	docs
Mockup Window	✅	src	docs
Modal	✅	src	docs
Navbar	✅	src	docs
Pagination	✅	src	docs
Progress	✅	src	docs
Radial Progress	✅	src	docs
Radio	✅	src	docs
Range	✅	src	docs
Rating	✅	src	docs
Select	✅	src	docs
Skeleton	✅	src	docs
Stack	✅	src	docs
Stats	✅	src	docs
Status	✅	src	docs
Steps	✅	src	docs
Swap	✅	src	docs
Tab	✅	src	docs
Table	✅	src	docs
Text Rotate	✅	src	docs
Textarea	✅	src	docs
Theme Controller	✅	src	docs
Timeline	✅	src	docs
Toast	✅	src	docs
Toggle	✅	src	docs
Tooltip	✅	src	docs
Validator	✅	src	docs

Progress: 62/62 components implemented (100% coverage!)

TODO utility

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

Modules

components

daisyUI components

utils

Utility functions and types for daisyUI components

Macros

merge_classes

Macro to merge multiple class names into a single ClassAttributes instance