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

Changelog

September 2025 - leptos_ui v0.2 Breaking Changes

We refactored the leptos_ui crate with breaking changes.

New macro system:

clx!: Elements with children
void!: Self-closing elements (no children)

See MDN Docs for reference about void elements.

Attribute changes: Removed direct props from macros. Use attr:* and prop:* pattern instead:

// Define component
void! {MyInput, input, "border border-input"}

// Before
<MyInput value=move || url().to_string() readonly=true class="flex-1" />

// After
<MyInput prop:value=move || url().to_string() attr:readonly=true class="flex-1" />

License

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

leptos_ui 0.2.1