Sections
Get Started
Components

Empty

Previous Next

Use the Empty component to display an empty state.

View shadcn-svelte docs Component source
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 FolderCodeIcon from "@lucide/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


npx shadcn-svelte@latest add https://neobrutalism-svelte.flenze.com/r/empty.json

Usage

<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 "@lucide/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 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 "@lucide/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.

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 BellIcon from "@lucide/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.

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 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.

CN
LR
ER
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 "@lucide/svelte/icons/plus";
</script>

<Empty.Root class="flex-none border">
  <Empty.Header>
    <Empty.Media>
      <Avatar.Group class="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>
      </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>