- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
- Typography
Installation#
pnpm dlx shadcn@latest add @force-ui-svelte/empty
Usage#
<script lang="ts">
import * as Empty from "@/svelte-ui/empty/index.js";
import { Button } from "@/svelte-ui/button/index.js";
import FolderCodeIcon from "~icons/ms/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>Composition#
Use the following composition to build an Empty state:
Empty
├── Empty.Header
│ ├── Empty.Media
│ ├── Empty.Title
│ └── Empty.Description
└── Empty.ContentExamples#
Outline#
Use the border utility class to create an 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.
RTL#
To enable RTL support in Force UI, see the RTL configuration guide.
API Reference#
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">
<Icon />
</Empty.Media><Empty.Media>
<Avatar.Root>
<Avatar.Image src="..." />
<Avatar.Fallback>CN</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>