Empty

Use the Empty component to display a empty state.

<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import FolderCodeIcon from "@tabler/icons-svelte/icons/folder-code";
  import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
</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>
    <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="#/">
      Learn More <ArrowUpRightIcon class="inline" />
    </a>
  </Button>
</Empty.Root>

Installation

pnpm dlx shadcn-svelte@latest add empty

npx shadcn-svelte@latest add empty

bun x shadcn-svelte@latest add empty

npx shadcn-svelte@latest add empty

Usage

<script lang="ts">
  import * as InputGroup from "$lib/components/ui/input-group/index.js";
  import SearchIcon from "@lucide/svelte/icons/search";
</script>
 
<InputGroup.Root>
  <InputGroup.Input placeholder="Search..." />
  <InputGroup.Addon>
    <SearchIcon />
  </InputGroup.Addon>
  <InputGroup.Addon align="inline-end">
    <InputGroup.Button>Search</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>

Examples

Outline

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

<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 "@tabler/icons-svelte/icons/cloud";
</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.

<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import BellIcon from "@tabler/icons-svelte/icons/bell";
  import RefreshCcwIcon from "@lucide/svelte/icons/refresh-ccw";
</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">
      <RefreshCcwIcon />
      Refresh
    </Button>
  </Empty.Content>
</Empty.Root>

Avatar

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

<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/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 EmptyMedia component to display an avatar group in the empty state.

<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 "@lucide/svelte/icons/plus";
</script>
 
<Empty.Root>
  <Empty.Header>
    <Empty.Media>
      <div
        class="*:ring-background flex -space-x-2 *:size-12 *:ring-2 *: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 EmptyContent component.

<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 SearchIcon from "@lucide/svelte/icons/search";
</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>

Dropdown Menu Field