#leptos #tailwind #clx #ui

leptos_ui

Macros to build UI components easily with Leptos and Tailwind CSS

14 releases

Uses new Rust 2024

0.1.14 Apr 27, 2025
0.1.12 Apr 17, 2025
0.1.8 Mar 31, 2025

#1026 in HTTP server

Download history 110/week @ 2025-02-27 24/week @ 2025-03-06 395/week @ 2025-03-13 119/week @ 2025-03-20 196/week @ 2025-03-27 47/week @ 2025-04-03 207/week @ 2025-04-10 354/week @ 2025-04-17 113/week @ 2025-04-24

734 downloads per month

MIT license

18KB
342 lines

Leptos UI

A utility crate for creating UI components in Leptos with Tailwind CSS class merging support. 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:*"

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"

PS: Dont forget to run regularly cargo update (frequently updates) !

License

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

Dependencies

~23–35MB
~560K SLoC