8.0k New

Empty

Previous Next

Use the Empty component to display an empty state.

Epicenter

Local-first, open source apps

Special Sponsor
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
Learn More 
<script lang="ts">
	import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
	import FolderCodeIcon from "@tabler/icons-svelte/icons/folder-code";
	import * as Empty from "$lib/components/ui/empty/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Empty.Root>
	<Empty.Header>
		<Empty.Media variant="icon">
			<FolderCodeIcon />
		</Empty.Media>
		<Empty.Title>No Projects Yet</Empty.Title>
		<Empty.Description>
			You haven't created any projects yet. Get started by creating your first project.
		</Empty.Description>
	</Empty.Header>
	<Empty.Content class="flex-row justify-center gap-2">
		<Button>Create Project</Button>
		<Button variant="outline">Import Project</Button>
	</Empty.Content>
	<Button variant="link" href="##" class="text-muted-foreground" size="sm">
		Learn More <ArrowUpRightIcon />
	</Button>
</Empty.Root>

Installation 

pnpm dlx shadcn-svelte@latest add empty

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>

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.
<script lang="ts">
	import CloudIcon from "@tabler/icons-svelte/icons/cloud";
	import * as Empty from "$lib/components/ui/empty/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Empty.Root class="border border-dashed">
	<Empty.Header>
		<Empty.Media variant="icon">
			<CloudIcon />
		</Empty.Media>
		<Empty.Title>Cloud Storage Empty</Empty.Title>
		<Empty.Description>
			Upload files to your cloud storage to access them anywhere.
		</Empty.Description>
	</Empty.Header>
	<Empty.Content>
		<Button variant="outline" size="sm">Upload Files</Button>
	</Empty.Content>
</Empty.Root>

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.
<script lang="ts">
	import RefreshCcwIcon from "@lucide/svelte/icons/refresh-ccw";
	import BellIcon from "@tabler/icons-svelte/icons/bell";
	import * as Empty from "$lib/components/ui/empty/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Empty.Root class="h-full bg-muted/30">
	<Empty.Header>
		<Empty.Media variant="icon">
			<BellIcon />
		</Empty.Media>
		<Empty.Title>No Notifications</Empty.Title>
		<Empty.Description class="max-w-xs text-pretty">
			You're all caught up. New notifications will appear here.
		</Empty.Description>
	</Empty.Header>
	<Empty.Content>
		<Button variant="outline">
			<RefreshCcwIcon data-icon="inline-start" />
			Refresh
		</Button>
	</Empty.Content>
</Empty.Root>

Avatar

Use the Empty.Media 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.
<script lang="ts">
	import * as Avatar from "$lib/components/ui/avatar/index.js";
	import * as Empty from "$lib/components/ui/empty/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Empty.Root>
	<Empty.Header>
		<Empty.Media variant="default">
			<Avatar.Root class="size-12">
				<Avatar.Image src="https://github.com/shadcn.png" class="grayscale" />
				<Avatar.Fallback>LR</Avatar.Fallback>
			</Avatar.Root>
		</Empty.Media>
		<Empty.Title>User Offline</Empty.Title>
		<Empty.Description>
			This user is currently offline. You can leave a message to notify them or try again later.
		</Empty.Description>
	</Empty.Header>
	<Empty.Content>
		<Button size="sm">Leave Message</Button>
	</Empty.Content>
</Empty.Root>

Avatar Group

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

CN
LR
ER
No Team Members
Invite your team to collaborate on this project.
<script lang="ts">
	import PlusIcon from "@lucide/svelte/icons/plus";
	import * as Avatar from "$lib/components/ui/avatar/index.js";
	import * as Empty from "$lib/components/ui/empty/index.js";
	import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Empty.Root>
	<Empty.Header>
		<Empty.Media>
			<div
				class="flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale"
			>
				<Avatar.Root>
					<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
					<Avatar.Fallback>CN</Avatar.Fallback>
				</Avatar.Root>
				<Avatar.Root>
					<Avatar.Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
					<Avatar.Fallback>LR</Avatar.Fallback>
				</Avatar.Root>
				<Avatar.Root>
					<Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
					<Avatar.Fallback>ER</Avatar.Fallback>
				</Avatar.Root>
			</div>
		</Empty.Media>
		<Empty.Title>No Team Members</Empty.Title>
		<Empty.Description>Invite your team to collaborate on this project.</Empty.Description>
	</Empty.Header>
	<Empty.Content>
		<Button size="sm">
			<PlusIcon />
			Invite Members
		</Button>
	</Empty.Content>
</Empty.Root>

InputGroup

You can add an InputGroup component to the Empty.Content component.

404 - Not Found
The page you're looking for doesn't exist. Try searching for what you need below.
/
Need help? Contact support
<script lang="ts">
	import SearchIcon from "@lucide/svelte/icons/search";
	import * as Empty from "$lib/components/ui/empty/index.js";
	import * as InputGroup from "$lib/components/ui/input-group/index.js";
	import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
 
<Empty.Root>
	<Empty.Header>
		<Empty.Title>404 - Not Found</Empty.Title>
		<Empty.Description>
			The page you're looking for doesn't exist. Try searching for what you need below.
		</Empty.Description>
	</Empty.Header>
	<Empty.Content>
		<InputGroup.Root class="sm:w-3/4">
			<InputGroup.Input placeholder="Try searching for pages..." />
			<InputGroup.Addon>
				<SearchIcon />
			</InputGroup.Addon>
			<InputGroup.Addon align="inline-end">
				<Kbd.Root>/</Kbd.Root>
			</InputGroup.Addon>
		</InputGroup.Root>
		<Empty.Description>
			Need help? <a href="#/">Contact support</a>
		</Empty.Description>
	</Empty.Content>
</Empty.Root>