videorc/uiEmpty
What a pane or a list says when there's nothing in it. Short muted text, centred, with an optional title and action, and no illustration, media tile or dashed box.
Installation
$ pnpm dlx shadcn@latest add @videorc/emptyUsage
import {
Empty,
EmptyDescription,
EmptyHeader,
EmptyTitle,
} from "@/components/ui/empty";<Empty>
<EmptyHeader>
<EmptyTitle>No recordings yet</EmptyTitle>
<EmptyDescription>
Recordings you make in the Studio show up here.
</EmptyDescription>
</EmptyHeader>
</Empty>Anatomy
<Empty>
<EmptyHeader>
<EmptyTitle />
<EmptyDescription />
</EmptyHeader>
<EmptyContent />
</Empty>Examples
Description only
When a list is empty only because of a filter or a search, the description alone is enough. The pane or list it sits in sets the space around it.
Theming
| Token or attribute | Meaning |
|---|---|
text-sm, text-muted-foreground | The description: 14 px secondary text |
text-sm font-medium | The title: 14 px at weight 500, never larger |
gap-3, p-6 | The only spacing it brings; it has no radius or border of its own |
Accessibility
EmptyTitle is a <div>. When the empty state is what the page is about, put a heading inside it (<EmptyTitle><h2>…</h2></EmptyTitle>). An action in EmptyContent is an ordinary button or link with its own name.
API reference
Every part takes every <div> prop. Unlike shadcn/ui's Empty there is no EmptyMedia: Videorc's empty states are words only.
Disabled Reason
Says why a control is disabled, on hover and on keyboard focus. A focusable wrapper carries the tooltip, and the reason stays the control's description.
Spinner
The one spinner for work in flight, on the icon set's SpinnerIcon. It announces itself as a status unless it sits beside its own words.