Leptos UI

A utility crate for creating UI components in Leptos with Tailwind CSS class merging support. Built on of tw_merge.

Features

• clx! macro for creating components with merged Tailwind classes
• clx_with_props! macro for creating components with custom props and merged Tailwind classes

Usage

Basic Component with clx!

use leptos::*;
use leptos_ui::clx;

let Card = clx! {div, "rounded-lg border p-4", "bg-sky-500"};

view! {
    <Card>"This Card will be sky-500 🩵."</Card>
    <Card class="bg-orange-500">"This Card will be orange-500 🧡."</Card>
}

Advanced Component with clx_with_props!

use leptos::*;
use leptos_ui::clx_with_props;

let Button = clx_with_props! {button, "px-4 py-2 rounded-md", "bg-blue-500 text-white", {
    #[prop(optional)]
    on_click: Option<Callback<MouseEvent>>,
}};

view! {
    <Button on_click=move |_| { /* handle click */ }>
        "Click me!"
    </Button>
}

Installation

Add this to your Cargo.toml:

[dependencies]
leptos_ui = "0.1"

License

MIT