#tailwind #leptos #clx

leptos_ui

Macros to build UI components easily with Leptos and Tailwind CSS

13 releases

Uses new Rust 2024

new 0.1.12 Apr 17, 2025
0.1.11 Apr 17, 2025
0.1.8 Mar 31, 2025

#1185 in HTTP server

Download history 121/week @ 2025-03-01 56/week @ 2025-03-08 433/week @ 2025-03-15 40/week @ 2025-03-22 212/week @ 2025-03-29 32/week @ 2025-04-05 391/week @ 2025-04-12

702 downloads per month

MIT license

17KB
280 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
~561K SLoC