1<script lang="ts"> 2 import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right'; 3 import FolderIcon from '@lucide/svelte/icons/folder'; 4 import Button from '../button/button.svelte'; 5 import * as Empty from './index.js'; 6</script> 7 8<Empty.Root> 9 <Empty.Header> 10 <Empty.Media variant="icon"> 11 <FolderIcon /> 12 </Empty.Media> 13 <Empty.Title>No Projects Yet</Empty.Title> 14 <Empty.Description> 15 You haven't created any projects yet. Get started by creating your first project. 16 </Empty.Description> 17 </Empty.Header> 18 <Empty.Content> 19 <div class="flex gap-2"> 20 <Button>Create Project</Button> 21 <Button variant="outline">Import Project</Button> 22 </div> 23 </Empty.Content> 24 <Button variant="ghost" class="text-muted-foreground" size="sm" href="#/"> 25 Learn More <ArrowUpRightIcon class="inline" /> 26 </Button> 27</Empty.Root> 28

Installation

Usage

Use empty for zero-data states. Compose Empty.Header with media, title, and description, then optional actions in Empty.Content. Set Empty.Media variant to icon for a tinted icon shell.

1<script lang="ts">
2	import FolderIcon from '@lucide/svelte/icons/folder';
3	import * as Empty from '~/components/empty';
4	import { Button } from '~/components/button';
5</script>
6
7<Empty.Root>
8	<Empty.Header>
9		<Empty.Media variant="icon">
10			<FolderIcon />
11		</Empty.Media>
12		<Empty.Title>No Projects Yet</Empty.Title>
13		<Empty.Description>
14			You haven't created any projects yet. Get started by creating your first project.
15		</Empty.Description>
16	</Empty.Header>
17	<Empty.Content>
18		<Button>Create Project</Button>
19	</Empty.Content>
20</Empty.Root>