Rust shadcn/ui is a Rust port of shadcn/ui .
TODO: introduction text
Rust shadcn/ui is available for the following frameworks:
The following frameworks are under consideration:
The tables below show the support for the various frameworks.
✅ = Supported
🟦 = Early Support
🚧 = Work In Progress
❌ = Unsupported
Name Dioxus Leptos Yew
Accordion ❌ ❌ ❌ Alert ❌ 🟦 ❌ Alert Dialog ❌ ❌ ❌ Aspect Ratio ❌ ❌ ❌ Avatar ❌ ❌ ❌ Badge ❌ ❌ ❌ Breadcrumb ❌ ❌ ❌ Button ❌ 🟦 ❌ Calendar ❌ ❌ ❌ Card ❌ 🟦 ❌ Carousel ❌ ❌ ❌ Chart ❌ ❌ ❌ Checkbox ❌ ❌ ❌ Collapsible ❌ ❌ ❌ Combobox ❌ ❌ ❌ Command ❌ ❌ ❌ Context Menu ❌ ❌ ❌ Data Table ❌ ❌ ❌ Date Picker ❌ ❌ ❌ Dialog ❌ ❌ ❌ Drawer ❌ ❌ ❌ Dropdown Menu ❌ ❌ ❌ Form ❌ ❌ ❌ Hover Card ❌ ❌ ❌ Input ❌ 🟦 ❌ Input OTP ❌ ❌ ❌ Label ❌ ❌ ❌ Menubar ❌ ❌ ❌ Navigation Menu ❌ ❌ ❌ Pagination ❌ ❌ ❌ Popover ❌ ❌ ❌ Progress ❌ ❌ ❌ Radio Group ❌ ❌ ❌ Resizable ❌ ❌ ❌ Scroll Area ❌ ❌ ❌ Select ❌ ❌ ❌ Separator ❌ ❌ ❌ Sheet ❌ ❌ ❌ Skeleton ❌ ❌ ❌ Slider ❌ ❌ ❌ Sonner ❌ ❌ ❌ Switch ❌ ❌ ❌ Table ❌ ❌ ❌ Tabs ❌ ❌ ❌ Textarea ❌ 🟦 ❌ Toast ❌ ❌ ❌ Toggle ❌ ❌ ❌ Toggle Group ❌ ❌ ❌ Tooltip ❌ ❌ ❌
This project is available under the MIT license .
The Rust shadcn/ui project is part of the Rust For Web .
Rust For Web creates and ports web UI libraries for Rust. All projects are free and open source.
Displays a callout for user attention.
Leptos
alert.rs
use leptos::*;
use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};
#[component]
pub fn AlertDemo() -> impl IntoView {
view! {
<Alert>
// <Terminal class="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
}
}
The CLI is not yet available. For now, manually copy the component source into your project.
Leptos
use leptos::*;
use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};
#[component]
fn Usage() -> impl IntoView {
view! {
<Alert>
// <Terminal class="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
}
}
Leptos
alert.rs
use leptos::*;
use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};
#[component]
pub fn AlertDemo() -> impl IntoView {
view! {
<Alert>
// <Terminal class="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
}
}
Leptos
alert_destructive.rs
use leptos::*;
use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle, AlertVariant};
#[component]
pub fn AlertDestructive() -> impl IntoView {
view! {
<Alert variant=AlertVariant::Destructive>
// <AlertCircle class="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Your session has expired. Please log in again.
</AlertDescription>
</Alert>
}
}
Displays a button or a component that looks like a button.
Leptos
button.rs
use leptos::*;
use crate::components::ui::button::Button;
#[component]
pub fn ButtonDemo() -> impl IntoView {
view! {
<Button>Button</Button>
}
}
The CLI is not yet available. For now, manually copy the component source into your project.
Leptos
rust-shadcn-ui add button
Leptos
use leptos::*;
use crate::components::ui::button::{Button, ButtonVariant};
#[component]
fn Usage() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Outline>Button>/Button>
}
}
Leptos
button.rs
use leptos::*;
use crate::components::ui::button::Button;
#[component]
pub fn ButtonDemo() -> impl IntoView {
view! {
<Button>Button</Button>
}
}
Leptos
button_secondary.rs
use leptos::*;
use crate::components::ui::button::{Button, ButtonVariant};
#[component]
pub fn ButtonSecondary() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Secondary>Secondary</Button>
}
}
Leptos
button_destructive.rs
use leptos::*;
use crate::components::ui::button::{Button, ButtonVariant};
#[component]
pub fn ButtonDestructive() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Destructive>Destructive</Button>
}
}
Leptos
button_outline.rs
use leptos::*;
use crate::components::ui::button::{Button, ButtonVariant};
#[component]
pub fn ButtonOutline() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Outline>Outline</Button>
}
}
Leptos
button_ghost.rs
use leptos::*;
use crate::components::ui::button::{Button, ButtonVariant};
#[component]
pub fn ButtonGhost() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Ghost>Ghost</Button>
}
}
Leptos
button_link.rs
use leptos::*;
use crate::components::ui::button::{Button, ButtonVariant};
#[component]
pub fn ButtonLink() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Link>Link</Button>
}
}
Leptos
button_icon.rs
use leptos::*;
use crate::components::ui::button::{Button, ButtonSize, ButtonVariant};
#[component]
pub fn ButtonIcon() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Outline size=ButtonSize::Icon>
{/* <ChevronRight className="h-4 w-4" /> */}
</Button>
}
}
Leptos
button_with_icon.rs
use leptos::*;
use crate::components::ui::button::Button;
#[component]
pub fn ButtonWithIcon() -> impl IntoView {
view! {
<Button>
{/* <Mail className="mr-2 h-4 w-4" /> */}
Login with Email
</Button>
}
}
Leptos
button_loading.rs
use leptos::*;
use crate::components::ui::button::Button;
#[component]
pub fn ButtonLoading() -> impl IntoView {
view! {
<Button attr:disabled=true>
{/* <Loader2 className="mr-2 h-4 w-4 animate-spin" /> */}
Please wait
</Button>
}
}
Displays a card with header, content, and footer.
TODO
Displays a form input field or a component that looks like an input field.
TODO
Displays a form textarea or a component that looks like a textarea.
TODO
