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.

<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import ArrowUpRightIcon from "phosphor-svelte/lib/ArrowUpRightIcon";
  import FolderOpenIcon from "phosphor-svelte/lib/FolderOpenIcon";
</script>
 
<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="icon">
      <FolderOpenIcon />
    </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>
    <div class="flex gap-2">
      <Button>Create Project</Button>
      <Button variant="outline">Import Project</Button>
    </div>
  </Empty.Content>
  <Button variant="link" class="text-muted-foreground" size="sm">
    <a href="/docs">
      Learn More <ArrowUpRightIcon class="inline" />
    </a>
  </Button>
</Empty.Root>

Installation

pnpm dlx jsrepo@latest add empty

npx jsrepo@latest add empty

yarn dlx jsrepo@latest add empty

bunx jsrepo@latest add empty

Copy and paste the following code into your project.

<script lang="ts">
  import { cn, type WithElementRef } from '$lib/utils.js';
  import type { HTMLAttributes } from 'svelte/elements';

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="empty-content"
  class={cn(
    'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-muted-foreground text-balance',
    className
  )}
  {...restProps}
>
  {@render children?.()}
</div>

Usage

<script lang="ts">
  import * as Empty from '$lib/components/ui/empty/index.js';
  import FolderOpenIcon from 'phosphor-svelte/lib/FolderOpenIcon';
</script>

<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="icon">
      <FolderOpenIcon />
    </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 an outline empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import CloudIcon from "phosphor-svelte/lib/CloudIcon";
</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 * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import ArrowsCounterClockwiseIcon from "phosphor-svelte/lib/ArrowsCounterClockwiseIcon";
  import BellIcon from "phosphor-svelte/lib/BellIcon";
</script>
 
<Empty.Root
  class="from-muted/50 to-background h-full bg-gradient-to-b from-30%"
>
  <Empty.Header>
    <Empty.Media variant="icon">
      <BellIcon />
    </Empty.Media>
    <Empty.Title>No Notifications</Empty.Title>
    <Empty.Description
      >You're all caught up. New notifications will appear here.</Empty.Description
    >
  </Empty.Header>
  <Empty.Content>
    <Button variant="outline" size="sm">
      <ArrowsCounterClockwiseIcon />
      Refresh
    </Button>
  </Empty.Content>
</Empty.Root>

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.

<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="default">
      <Avatar.Root class="size-12">
        <Avatar.Image
          src="https://github.com/cachesdev.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 EmptyMedia component to display an avatar group in the empty state.

No Team Members

Invite your team to collaborate on this project.

<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Avatar from "$lib/components/ui/avatar/index.js";
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
</script>
 
<Empty.Root class="flex-none border">
  <Empty.Header>
    <Empty.Media>
      <Avatar.Group class="grayscale">
        <Avatar.Root>
          <Avatar.Image
            src="https://github.com/cachesdev.png"
            alt="@cachesdev"
          />
          <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>
      </Avatar.Group>
    </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 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

<script lang="ts">
  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";
  import MagnifyingGlassIcon from "phosphor-svelte/lib/MagnifyingGlassIcon";
</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>
        <MagnifyingGlassIcon />
      </InputGroup.Addon>
      <InputGroup.Addon align="inline-end">
        <Kbd.Root>/</Kbd.Root>
      </InputGroup.Addon>
    </InputGroup.Root>
    <Empty.Description>
      Need help? <a href="/docs">Contact support</a>
    </Empty.Description>
  </Empty.Content>
</Empty.Root>