Empty

Use the Empty component to display an empty state.

Basic

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Create project

Learn more

With Muted Background

No results found

No results found for your search. Try adjusting your search terms.

Learn more

With Border

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

With Icon

Nothing to see here

No posts have been created yet. Get started by creating your first post.

With Muted Background Alt

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

In Card

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Create project

Learn more

<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLAttributes } from 'svelte/elements';
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@sveltery/components/empty';
  import { Button } from '@sveltery/components/button';
  import { IconPlaceholder } from '@sveltery/components/icons';
  import { InputGroup, InputGroupAddon, InputGroupInput } from '@sveltery/components/input-group';
  import { Kbd } from '@sveltery/components/kbd';
</script>

{#snippet link(props: HTMLAttributes<HTMLElement>, _state: unknown, content: Snippet | undefined)}
  <!-- svelte-ignore a11y_invalid_attribute -->
  <a href="#" {...props}>{@render content?.()}</a>
{/snippet}

{#snippet LearnMore()}
  <Button variant="link" render={link} class="text-muted-foreground" nativeButton={false}>
    Learn more
    <IconPlaceholder
      lucide="ArrowUpRightIcon"
      tabler="IconArrowUpRight"
      hugeicons="ArrowUpRight01Icon"
      phosphor="ArrowUpRightIcon"
      remixicon="RiArrowRightUpLine"
    />
  </Button>
{/snippet}

{#snippet EmptyBasic()}
  <Example title="Basic">
    <Empty>
      <EmptyHeader>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>
          You haven't created any projects yet. Get started by creating your first project.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <div class="flex gap-2">
          <Button render={link} nativeButton={false}>Create project</Button>
          <Button variant="outline">Import project</Button>
        </div>
        {@render LearnMore()}
      </EmptyContent>
    </Empty>
  </Example>
{/snippet}

{#snippet EmptyWithMutedBackground()}
  <Example title="With Muted Background">
    <Empty class="bg-muted">
      <EmptyHeader>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>
          No results found for your search. Try adjusting your search terms.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Try again</Button>
        {@render LearnMore()}
      </EmptyContent>
    </Empty>
  </Example>
{/snippet}

{#snippet EmptyWithBorder()}
  <Example title="With Border">
    <Empty class="border">
      <EmptyHeader>
        <EmptyTitle>404 - Not Found</EmptyTitle>
        <EmptyDescription>
          The page you're looking for doesn't exist. Try searching for what you need below.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <InputGroup class="w-3/4">
          <InputGroupInput placeholder="Try searching for pages..." />
          <InputGroupAddon>
            <IconPlaceholder
              lucide="CircleDashedIcon"
              tabler="IconCircleDashed"
              hugeicons="DashedLineCircleIcon"
              phosphor="CircleDashedIcon"
              remixicon="RiLoaderLine"
            />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <Kbd>/</Kbd>
          </InputGroupAddon>
        </InputGroup>
        <EmptyDescription>
          Need help?
          <!-- svelte-ignore a11y_invalid_attribute -->
          <a href="#">Contact support</a>
        </EmptyDescription>
      </EmptyContent>
    </Empty>
  </Example>
{/snippet}

{#snippet EmptyWithIcon()}
  <Example title="With Icon">
    <Empty class="border">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <IconPlaceholder
            lucide="FolderIcon"
            tabler="IconFolder"
            hugeicons="Folder01Icon"
            phosphor="FolderIcon"
            remixicon="RiFolderLine"
          />
        </EmptyMedia>
        <EmptyTitle>Nothing to see here</EmptyTitle>
        <EmptyDescription>
          No posts have been created yet. Get started by
          <!-- svelte-ignore a11y_invalid_attribute -->
          <a href="#">creating your first post</a>.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline">
          <IconPlaceholder
            lucide="PlusIcon"
            tabler="IconPlus"
            hugeicons="PlusSignIcon"
            phosphor="PlusIcon"
            remixicon="RiAddLine"
            data-icon="inline-start"
          />
          New Post
        </Button>
      </EmptyContent>
    </Empty>
  </Example>
{/snippet}

{#snippet EmptyWithMutedBackgroundAlt()}
  <Example title="With Muted Background Alt">
    <Empty class="bg-muted/50">
      <EmptyHeader>
        <EmptyTitle>404 - Not Found</EmptyTitle>
        <EmptyDescription>
          The page you're looking for doesn't exist. Try searching for what you need below.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <InputGroup class="w-3/4">
          <InputGroupInput placeholder="Try searching for pages..." />
          <InputGroupAddon>
            <IconPlaceholder
              lucide="CircleDashedIcon"
              tabler="IconCircleDashed"
              hugeicons="DashedLineCircleIcon"
              phosphor="CircleDashedIcon"
              remixicon="RiLoaderLine"
            />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <Kbd>/</Kbd>
          </InputGroupAddon>
        </InputGroup>
        <EmptyDescription>
          Need help?
          <!-- svelte-ignore a11y_invalid_attribute -->
          <a href="#">Contact support</a>
        </EmptyDescription>
      </EmptyContent>
    </Empty>
  </Example>
{/snippet}

{#snippet EmptyInCard()}
  <Example title="In Card">
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <IconPlaceholder
            lucide="FolderIcon"
            tabler="IconFolder"
            hugeicons="Folder01Icon"
            phosphor="FolderIcon"
            remixicon="RiFolderLine"
          />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>
          You haven't created any projects yet. Get started by creating your first project.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <div class="flex gap-2">
          <Button render={link} nativeButton={false}>Create project</Button>
          <Button variant="outline">Import project</Button>
        </div>
        {@render LearnMore()}
      </EmptyContent>
    </Empty>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render EmptyBasic()}
  {@render EmptyWithMutedBackground()}
  {@render EmptyWithBorder()}
  {@render EmptyWithIcon()}
  {@render EmptyWithMutedBackgroundAlt()}
  {@render EmptyInCard()}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority

Copy the component

Copy the following files into src/lib/components/ui/empty.

src/lib/components/ui/empty/Empty.svelte

<script lang="ts">
  import type { EmptyProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: EmptyProps = $props();
</script>
<div data-slot="empty" {...props} class={cn('gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/empty/EmptyContent.svelte

<script lang="ts">
  import type { EmptyContentProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: EmptyContentProps = $props();
</script>
<div data-slot="empty-content" {...props} class={cn('gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/empty/EmptyDescription.svelte

<script lang="ts">
  import type { EmptyDescriptionProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: EmptyDescriptionProps = $props();
</script>
<div data-slot="empty-description" {...props} class={cn('text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/empty/EmptyHeader.svelte

<script lang="ts">
  import type { EmptyHeaderProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: EmptyHeaderProps = $props();
</script>
<div data-slot="empty-header" {...props} class={cn('gap-2 flex max-w-sm flex-col items-center', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/empty/EmptyMedia.svelte

<script lang="ts">
  import type { EmptyMediaProps } from './types.js';
  import { cn } from 'cn';
  import { emptyMediaVariants } from './variants.js';
  let { children, class: classProp, variant = 'default', ...props }: EmptyMediaProps = $props();
</script>
<div data-slot="empty-icon" data-variant={variant} {...props} class={cn(emptyMediaVariants({ variant, class: classProp }))}>
  {@render children?.()}
</div>

src/lib/components/ui/empty/EmptyTitle.svelte

<script lang="ts">
  import type { EmptyTitleProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: EmptyTitleProps = $props();
</script>
<div data-slot="empty-title" {...props} class={cn('text-sm font-medium tracking-tight', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/empty/types.ts

import type { HTMLAttributes } from 'svelte/elements';
import type { EmptyMediaVariants } from './variants.js';

type NativeEmptyProps = HTMLAttributes<HTMLDivElement>;

export type EmptyProps = NativeEmptyProps;
export type EmptyHeaderProps = NativeEmptyProps;
export type EmptyTitleProps = NativeEmptyProps;
export type EmptyDescriptionProps = NativeEmptyProps;
export type EmptyContentProps = NativeEmptyProps;
export type EmptyMediaProps = NativeEmptyProps & EmptyMediaVariants;

src/lib/components/ui/empty/variants.ts

// Adapted from shadcn-ui/ui d75a96ab; MIT: packages/ui/THIRD_PARTY_NOTICES.md.
import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
export const emptyMediaVariants = cva('mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', {
  variants: { variant: { default: 'bg-transparent', icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4" } },
  defaultVariants: { variant: 'default' },
});
export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;

src/lib/components/ui/empty/index.ts

export { default as Empty } from './Empty.svelte';
export { default as EmptyHeader } from './EmptyHeader.svelte';
export { default as EmptyTitle } from './EmptyTitle.svelte';
export { default as EmptyDescription } from './EmptyDescription.svelte';
export { default as EmptyContent } from './EmptyContent.svelte';
export { default as EmptyMedia } from './EmptyMedia.svelte';
export type { EmptyProps, EmptyHeaderProps, EmptyTitleProps, EmptyDescriptionProps, EmptyContentProps, EmptyMediaProps } from './types.js';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '$lib/components/ui/empty';
</script>

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderIcon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>