Alert

Rust/UI Icons - ChevronLeftRust/UI Icons - ChevronRight

Rust/UI component that displays a callout to the user.

  • Rust/UI Icons - CopyCopy Demo
Rust/UI Icons - Terminal

Heads up !

You can add components to your app using the cli.

use icons::Terminal;
use leptos::prelude::*;

use crate::components::ui::alert::{Alert, AlertDescription, AlertTitle};

#[component]
pub fn DemoAlert() -> impl IntoView {
    view! {
        <Alert>
            <Terminal />
            <AlertTitle>"Heads up !"</AlertTitle>
            <AlertDescription>"You can add components to your app using the cli."</AlertDescription>
        </Alert>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_alert
ui add alert

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/alert.rs

use leptos::prelude::*;
use leptos_ui::clx;

mod components {
    use super::*;
    clx! {Alert, div, "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7"}
    clx! {AlertTitle, h4, "mb-1 font-medium tracking-tight leading-none"}
    clx! {AlertDescription, p, "text-sm [&_p]:leading-relaxed"}
}

pub use components::*;

Update the imports to match your project setup.

Usage

use crate::components::ui::alert::{
    Alert,
    AlertDescription,
    AlertTitle,
};
<Alert>
    <AlertTitle>"Alert Title"</AlertTitle>
    <AlertDescription>"Alert description goes here"</AlertDescription>
</Alert>
Rust/UI Icons - ChevronLeftAccordionAlert DialogRust/UI Icons - ChevronRight