Layout

EmptyState

A placeholder for empty views with an icon, a title, a description and actions.

<script>
  import { EmptyState, Button } from "@codeatlasdev/ui";
  import { Inbox } from "@lucide/svelte";
</script>

<EmptyState icon={Inbox} title="No messages yet" description="New messages will appear here.">
  {#snippet actions()}<Button size="sm">Compose</Button>{/snippet}
</EmptyState>

Basic

Icon, title, description and a primary action.

No messages yet

Your inbox is empty. New messages will appear here.

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { Inbox } from '@lucide/svelte';
</script>

<EmptyState icon={Inbox} title="No messages yet" description="Your inbox is empty. New messages will appear here.">
  {#snippet actions()}
    <Button variant="filled" size="sm">Compose message</Button>
  {/snippet}
</EmptyState>

No results

For searches and filters that match nothing.

No results found

Try adjusting your search terms or filters.

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { Search } from '@lucide/svelte';
</script>

<EmptyState icon={Search} title="No results found" description="Try adjusting your search terms or filters.">
  {#snippet actions()}
    <Button variant="outlined" size="sm">Clear filters</Button>
  {/snippet}
</EmptyState>

Error or offline

Failed network requests and loading errors.

Couldn't load data

Check your connection and try again.

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { WifiOff } from '@lucide/svelte';
</script>

<EmptyState icon={WifiOff} title="Couldn't load data" description="Check your connection and try again.">
  {#snippet actions()}
    <Button variant="outlined" size="sm">Retry</Button>
    <Button variant="ghost" size="sm">Contact support</Button>
  {/snippet}
</EmptyState>

Hero

A larger, brand-tinted tile with a glow. On mobile the actions stack full width, so put the primary one first.

Start your first project

Projects keep your sessions, contacts and settings in one place.

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { Inbox } from '@lucide/svelte';
</script>

<EmptyState variant="hero" icon={Inbox} title="Start your first project" description="Projects keep your sessions, contacts and settings in one place.">
  {#snippet actions()}
    <Button variant="filled">Create project</Button>
    <Button variant="ghost">Import</Button>
  {/snippet}
</EmptyState>

No icon

A minimal version without an icon.

Nothing here yet

Create your first item to get started.

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { Plus } from '@lucide/svelte';
</script>

<EmptyState title="Nothing here yet" description="Create your first item to get started.">
  {#snippet actions()}
    <Button variant="filled" size="sm">
      {#snippet leading()}<Plus size={14} />{/snippet}
      Create item
    </Button>
  {/snippet}
</EmptyState>

Props

Prop	Type	Default	Description
`icon`	`IconComponent`	–	Lucide icon. Size and color are managed by the component.
`title`	`string`	–	Main title.
`variant`	`'default' \| 'hero'`	`'default'`	'default' is a compact inline state. 'hero' adds a larger brand-tinted icon tile with a glow and bigger title.
`description`	`string`	–	Supporting text.
`actions`	`Snippet`	–	Call-to-action buttons.
`children`	`Snippet`	–	Extra content below the description.
`class`	`string`	`''`	Extra class names.