Installation

Add shadcn-iced to an iced 0.14 application, as a library or as source you own.

As a library

Add iced and shadcn_iced to your Cargo.toml:

Cargo.toml

[dependencies]
iced = "0.14"
shadcn_iced = { git = "https://github.com/r4ai/shadcn-iced" }

Then import the prelude, pick a theme and load the bundled fonts:

src/main.rs

use shadcn_iced::prelude::*;

#[derive(Debug, Clone)]
enum Message {
    Save,
}

fn view(_state: &()) -> iced::Element<'_, Message> {
    card()
        .title("Create project")
        .description("Deploy your new project in one-click.")
        .footer(button("Deploy").on_press(Message::Save))
        .width(350)
        .into()
}

fn main() -> iced::Result {
    iced::application(|| (), |_: &mut (), _: Message| {}, view)
        // Any shadcn/ui preset, e.g. zinc with the blue accent:
        .theme(|_: &()| shadcn_iced::theme::zinc(Mode::Dark).build())
        // Loads Geist, Inter and the Lucide icons.
        .shadcn_iced()
        .run()
}

Copy and paste

Install the CLI:

cargo install --git https://github.com/r4ai/shadcn-iced cargo-shadcn-iced

Then, in your project, add the dependencies and the components you want:

cargo add iced --features advanced,canvas,image,svg
cargo add shadcn_iced_core --git https://github.com/r4ai/shadcn-iced
cargo shadcn-iced add button card dialog

The components, and the components they use, are written to src/ui/, and src/ui/mod.rs is kept up to date. Declare the module and use them like any of your own code:

src/main.rs

mod ui;

fn view(state: &State) -> iced::Element<'_, Message> {
    ui::button::button("Click me").on_press(Message::Click).into()
}

Fonts and icons

.shadcn_iced() loads Geist, Geist Mono, Inter and the Lucide icon font, and makes Geist the default font. Every Lucide icon is a constant of shadcn_iced::lucide, e.g. lucide::ARROW_UP.

Introduction Theming