The parts of an empty state, to compose your own.

No documents yet
Create the first document of this project to get started.

Usage

Example.svelte
<script lang="ts">
	import FileTextIcon from "@lucide/svelte/icons/file-text";
	import PlusIcon from "@lucide/svelte/icons/plus";

	import { Button } from "@orochibraru/ui/button";
	import * as Empty from "@orochibraru/ui/empty";
</script>

<Empty.Root class="border">
	<Empty.Header>
		<Empty.Media variant="icon">
			<FileTextIcon />
		</Empty.Media>
		<Empty.Title>No documents yet</Empty.Title>
		<Empty.Description>
			Create the first document of this project to get started.
		</Empty.Description>
	</Empty.Header>
	<Empty.Content>
		<Button><PlusIcon /> New document</Button>
	</Empty.Content>
</Empty.Root>