huntabyte__shadcn-svelte/docs/content/components/empty.md

title, description, component, links

title	description	component	links
Empty	Use the Empty component to display a empty state.	true	source https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/empty

<script> import ComponentPreview from "$lib/components/component-preview.svelte"; import PMAddComp from "$lib/components/pm-add-comp.svelte"; import PMInstall from "$lib/components/pm-install.svelte"; import Steps from "$lib/components/steps.svelte"; import InstallTabs from "$lib/components/install-tabs.svelte"; import Step from "$lib/components/step.svelte"; </script>

Installation

{#snippet cli()} {/snippet} {#snippet manual()}

Copy and paste the component source files linked at the top of this page into your project.

{/snippet}

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>

Examples

Outline

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

Background

Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

Avatar

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

Avatar Group

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

InputGroup

You can add an InputGroup component to the EmptyContent component.