No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
Installation
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as Empty from "$lib/components/ui/empty/index.js";
import FolderCodeIcon from "@tabler/icons-svelte/icons/folder-code";
</script>
<Empty.Root>
<Empty.Header>
<Empty.Media variant="icon">
<FolderCodeIcon />
</Empty.Media>
<Empty.Title>No data</Empty.Title>
<Empty.Description>No data found</Empty.Description>
</Empty.Header>
<Empty.Content>
<Button>Add data</Button>
</Empty.Content>
</Empty.Root> Examples
Outline
Use the border utility class to create a outline empty state.
Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.
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.
Avatar
Use the EmptyMedia component to display an avatar in the empty state.
LR
User Offline
This user is currently offline. You can leave a message to notify them or try again
later.
Avatar Group
Use the EmptyMedia component to display an avatar group in the empty state.
CN
LR
ER
No Team Members
Invite your team to collaborate on this project.
InputGroup
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