Leptos UI

Macros to build UI components easily with Leptos and Tailwind CSS. Built on top of tw_merge.

Features

clx! macro for creating components with merged Tailwind classes
a! macro for creating anchor elements with merged Tailwind classes
div! macro for creating components without children
input! macro for creating input elements with merged Tailwind classes
transition! macro for creating components with "view-transition-name:*"

Example in Production

This crate is used in rust-ui.com — check it out to see Leptos UI and Tailwind CSS in action :)

Usage

Basic Component with `clx!`

// components/ui/card.rs
use leptos::prelude::*;
use leptos_ui::clx;

mod components {
    use super::*;
    clx! {Card, div, "rounded-lg p-4", "bg-sky-500"} // 🩵
}

pub use components::*;

// components/demos/demo_card.rs
#[component]
pub fn DemoCard() -> impl IntoView {
    view! {
        <Card>"Card bg-sky-500 🩵"</Card>
        <Card class="bg-orange-500">"Card bg-orange-500 🧡"</Card>
        // └──> 🤯 NO CONFLICT CLASS!!
    }
}

Installation

Add this to your Cargo.toml:

[dependencies]
leptos_ui = "0.1"

P.S.: Don't forget to regularly run cargo update (frequent updates)!

License

This project is licensed under the MIT License. See the LICENSE file for details.

leptos_ui 0.1.45