Installation

How to get Floe UI into your Iced project.

Philosophy

Floe UI is not a traditional crate dependency. Instead, you copy the source code directly into your project, just like shadcn/ui does for React. This gives you full ownership and complete customization freedom.

Setup

Add Iced to your project

Make sure you have Iced as a dependency in your Cargo.toml.

Cargo.toml

[dependencies]
iced = { version = "0.14", features = ["advanced"] }

Install the Floe CLI

Install the official Floe CLI globally to manage your components easily.

terminal

cargo install floe-ui

Initialize Floe in your project

Run the init command inside your Iced project. This will set up the src/floe_ui folder with the base theme system.

terminal

floe-ui init

Add components

Add only the components you need. The CLI will download the raw source code straight into your project.

terminal

floe-ui add button
floe-ui add input
floe-ui add card

Start using components

Import the prelude and start building your UI.

main.rs

mod floe_ui; "text-zinc-500">// Khai báo module đã được CLI tạo ra

use floe_ui::prelude::*;
use floe_ui::components::{button, card, input};

use iced::widget::column;
use iced::Element;

fn view(&self) -> Element<Message> {
    let theme = FloeTheme::zinc_dark();
    let tokens = &theme.tokens;

    let btn = button::primary("Click me", tokens)
        .on_press(Message::Clicked);

    let field = input::styled("Email…", &self.email, tokens)
        .on_input(Message::EmailChanged);

    let my_card = card::styled(
        column![btn, field].spacing(12),
        tokens,
    );

    my_card.into()
}

Fonts (Optional)

Floe UI includes a bundled icon font (based on Lucide) for icon support. To enable icons, load the font files from the floe-ui/fonts/ directory in your Iced application settings.