Empty

Rust/UI Icons - ChevronLeftRust/UI Icons - ChevronRight

Use the Empty component to display a empty state.

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

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

use icons::{ArrowUpRight, FolderCode};
use leptos::prelude::*;

use crate::components::ui::button::{Button, ButtonSize, ButtonVariant};
use crate::components::ui::empty::{
    Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyMediaVariant, EmptyTitle,
};

#[component]
pub fn DemoEmpty() -> impl IntoView {
    view! {
        <Empty>
            <EmptyHeader>
                <EmptyMedia variant=EmptyMediaVariant::Icon>
                    <FolderCode />
                </EmptyMedia>
                <EmptyTitle>"No Projects Yet"</EmptyTitle>
                <EmptyDescription>
                    "You haven't created any projects yet. Get started by creating your first project."
                </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <div class="flex gap-2">
                    <Button>"Create Project"</Button>
                    <Button variant=ButtonVariant::Outline>"Import Project"</Button>
                </div>
            </EmptyContent>
            <Button variant=ButtonVariant::Link size=ButtonSize::Sm class="text-muted-foreground">
                <a href="#" class="flex gap-1 items-center">
                    <span>"Learn More"</span>
                    <ArrowUpRight />
                </a>
            </Button>
        </Empty>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_empty
ui add empty

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/empty.rs

use leptos::prelude::*;
use leptos_ui::{clx, variants};

mod components {
    use super::*;
    clx! {Empty, div, "flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8 text-center"}
    clx! {EmptyHeader, div, "flex flex-col items-center gap-2"}
    clx! {EmptyTitle, h3, "text-lg font-semibold leading-none"}
    clx! {EmptyDescription, p, "text-muted-foreground text-sm"}
    clx! {EmptyContent, div, "flex items-center justify-center gap-2"}
}

pub use components::*;

/* ========================================================== */
/*                     ✨ FUNCTIONS ✨                        */
/* ========================================================== */

variants! {
    EmptyMedia {
        base: "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        variants: {
            variant: {
                Default: "bg-transparent",
                Icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
            },
            size: {
                Default: "",
            }
        },
        component: {
            element: div
        }
    }
}

Update the imports to match your project setup.

Usage

use crate::components::ui::empty::{
    Empty, 
    EmptyHeader, 
    EmptyMedia,
    EmptyDescription, 
    EmptyContent
};
<Empty>
  <EmptyHeader>
    <EmptyMedia variant=EmptyVariant::Icon>
      <Icon />
    </EmptyMedia>
    <EmptyTitle>"No data"</EmptyTitle>
    <EmptyDescription>"No data found"</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>"Add data"</Button>
  </EmptyContent>
</Empty>

Examples

Background

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

No Notifications

You're all caught up. New notifications will appear here.

use icons::{Bell, RefreshCcw};
use leptos::prelude::*;

use crate::components::ui::button::{Button, ButtonSize, ButtonVariant};
use crate::components::ui::empty::{
    Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyMediaVariant, EmptyTitle,
};

#[component]
pub fn DemoEmptyMuted() -> impl IntoView {
    view! {
        <Empty class="h-full bg-gradient-to-b from-muted/50 to-background from-30%">
            <EmptyHeader>
                <EmptyMedia variant=EmptyMediaVariant::Icon>
                    <Bell />
                </EmptyMedia>
                <EmptyTitle>"No Notifications"</EmptyTitle>
                <EmptyDescription>"You're all caught up. New notifications will appear here."</EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <Button variant=ButtonVariant::Outline size=ButtonSize::Sm>
                    <RefreshCcw />
                    "Refresh"
                </Button>
            </EmptyContent>
        </Empty>
    }
}
Rust/UI Icons - ChevronLeftDropzoneFieldRust/UI Icons - ChevronRight