Empty

Use the Empty component to display an empty state.

No Projects Yet

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

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn EmptyExample() -> impl IntoView {
    view! {
        <Empty>
            <EmptyHeader>
                <EmptyMedia variant="icon">{icon!(icondata::LuFolderCode)}</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="outline">"Import Project"</Button>
                </div>
            </EmptyContent>
            <Link as_button=true size="sm" class="text-(--muted-foreground)" href="#">
                "Learn More"
                {icon!(icondata::LuArrowUpRight)}
            </Link>
        </Empty>
    }
}

Outline

Use the border utility class to create an outline empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn EmptyOutlineExample() -> impl IntoView {
    view! {
        <Empty class="border border-dashed">
            <EmptyHeader>
                <EmptyMedia variant="icon">{icon!(icondata::LuCloud)}</EmptyMedia>
                <EmptyTitle>"Cloud Storage Empty"</EmptyTitle>
                <EmptyDescription>
                    "Upload files to your cloud storage to access them anywhere."
                </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <Button variant="outline" size="sm">
                    "Upload Files"
                </Button>
            </EmptyContent>
        </Empty>
    }
}

Background

Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

No Notifications

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

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn EmptyBackgroundExample() -> impl IntoView {
    view! {
        <Empty class="from-(--muted)/50 to-(--background) h-full bg-gradient-to-b from-30% rounded-md">
            <EmptyHeader>
                <EmptyMedia variant="icon">{icon!(icondata::LuBell)}</EmptyMedia>
                <EmptyTitle>"No Notifications"</EmptyTitle>
                <EmptyDescription>
                    "You're all caught up. New notifications will appear here."
                </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <Button variant="outline" size="sm">
                    {icon!(icondata::LuRefreshCcw)}
                    "Refresh"
                </Button>
            </EmptyContent>
        </Empty>
    }
}

Avatar

Use the EmptyMedia component to display an avatar in the empty state.

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn EmptyAvatarExample() -> impl IntoView {
    view! {
        <Empty>
            <EmptyHeader>
                <EmptyMedia variant="default">
                    <Avatar class="size-12 grayscale">
                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                        <AvatarFallback>"CN"</AvatarFallback>
                    </Avatar>
                </EmptyMedia>
                <EmptyTitle>"User Offline"</EmptyTitle>
                <EmptyDescription>
                    "This user is currently offline. You can leave a message to notify them
                    or try again later."
                </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <Button size="sm">"Leave Message"</Button>
            </EmptyContent>
        </Empty>
    }
}

Avatar Group

Use the EmptyMedia component to display an avatar group in the empty state.

No Team Members

Invite your team to collaborate on this project.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn EmptyAvatarGroupExample() -> impl IntoView {
    view! {
        <Empty>
            <EmptyHeader>
                <EmptyMedia>
                    <AvatarGroup>
                        <Avatar class="size-12 grayscale">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>"CN"</AvatarFallback>
                        </Avatar>
                        <Avatar class="size-12 grayscale">
                            <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
                            <AvatarFallback>"LR"</AvatarFallback>
                        </Avatar>
                        <Avatar class="size-12 grayscale">
                            <AvatarImage
                                src="https://github.com/evilrabbit.png"
                                alt="@evilrabbit"
                            />
                            <AvatarFallback>"ER"</AvatarFallback>
                        </Avatar>
                    </AvatarGroup>
                </EmptyMedia>
                <EmptyTitle>"No Team Members"</EmptyTitle>
                <EmptyDescription>
                    "Invite your team to collaborate on this project."
                </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <Button size="sm">{icon!(icondata::LuPlus)} "Invite Members"</Button>
            </EmptyContent>
        </Empty>
    }
}

Input Group

You can add an InputGroup component to the EmptyContent component.

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn EmptyInputGroupExample() -> impl IntoView {
    view! {
        <Empty>
            <EmptyHeader>
                <EmptyTitle>"404 - Not Found"</EmptyTitle>
                <EmptyDescription>
                    "The page you're looking for doesn't exist. Try searching for
                    what you need below."
                </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <InputGroup class="sm:w-3/4">
                    <Input placeholder="Try searching for pages..." />
                    <InputGroupAddon>{icon!(icondata::LuSearch)}</InputGroupAddon>
                    <InputGroupAddon align="inline-end">
                        <Kbd>"/"</Kbd>
                    </InputGroupAddon>
                </InputGroup>
                <EmptyDescription>"Need help? " <a href="#">"Contact support"</a></EmptyDescription>
            </EmptyContent>
        </Empty>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::Empty::*;

#[component]
pub fn EmptyAnatomy() -> impl IntoView {
    view! {
        <Empty>
            <EmptyHeader>
                <EmptyMedia />
                <EmptyTitle />
                <EmptyDescription />
            </EmptyHeader>
            <EmptyContent />
        </Empty>
    }
}

API Reference

Empty

The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.

Implements global attributes.

EmptyContent

Use the EmptyContent component to display the content of the empty state such as a button, input or a link.

Implements global attributes.

EmptyDescription

Use the EmptyDescription component to display the description of the empty state.

Implements global attributes.

EmptyHeader

The EmptyHeader component wraps the empty media, title, and description.

Implements global attributes.

EmptyMedia

Use the EmptyMedia component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

Custom Attributes
Name	Type	Default	Description
variant	String	""	Select which variant to render. Accepted values: "icon".

Implements global attributes.

EmptyTitle

Use the EmptyTitle component to display the title of the empty state.

Implements global attributes.