Empty | COSS for Svelte

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/empty.json

Usage

<script lang="ts">
  import Database01Icon from "@hugeicons/core-free-icons/Database01Icon";
  import * as Avatar from "$lib/components/ui/avatar/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Empty from "$lib/components/ui/empty/index.js";
  import HugeiconsIcon from "$lib/hugeicons-icon.svelte";
</script>

<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="icon">
      <HugeiconsIcon aria-hidden="true" icon={Database01Icon} strokeWidth={2} />
    </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>

API Reference

The API follows shadcn/ui’s empty component, adapted to Svelte namespace composition.

Empty.Root

The main component of the empty state. Wraps the Empty.Header and Empty.Content components.

Prop	Type	Default
`class`	`string`

<Empty.Root>
  <Empty.Header />
  <Empty.Content />
</Empty.Root>

Empty.Header

The Empty.Header component wraps the empty media, title, and description.

Prop	Type	Default
`class`	`string`

<Empty.Header>
  <Empty.Media />
  <Empty.Title />
  <Empty.Description />
</Empty.Header>

Empty.Media

Use the Empty.Media component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

Prop	Type	Default
`variant`	`"default" \\| "icon"`	`default`
`class`	`string`

<Empty.Media variant="icon">
  <HugeiconsIcon aria-hidden="true" icon={Database01Icon} strokeWidth={2} />
</Empty.Media>

<Empty.Media>
  <Avatar.Root>
    <Avatar.Image src="..." />
    <Avatar.Fallback>JD</Avatar.Fallback>
  </Avatar.Root>
</Empty.Media>

Empty.Title

Use the Empty.Title component to display the title of the empty state.

Prop	Type	Default
`class`	`string`

<Empty.Title>No data</Empty.Title>

Empty.Description

Use the Empty.Description component to display the description of the empty state.

Prop	Type	Default
`class`	`string`

<Empty.Description>You do not have any notifications.</Empty.Description>

Empty.Content

Use the Empty.Content component to display the content of the empty state such as a button, input or a link.

Prop	Type	Default
`class`	`string`

<Empty.Content>
  <Button>Add Project</Button>
</Empty.Content>