Empty state
A dashed frame, a hatched slot and one next step. It says what is missing and offers the way to fill it.
◆
Nothing yet
Start by adding one.
Controls
Code
import { EmptyState } from "@/components/ui/kit/feedback";
<EmptyState
title="Nothing yet"
action={<Button variant="ghost">…</Button>}
>
Start by adding one.
</EmptyState>Every state
◆
Nothing yet
Start by adding one.
Usage
Tokens it uses
| --surface | … |
|---|---|
| --line-2 | … |
| --panel | … |
| --ink | … |
| --muted | … |
| --spark-ink | … |
| --font-display | … |
| --font-body | … |
Values are read live from the stylesheet, so they follow the site theme.