Empty
An invitation to act, not an apology: what is missing, and the one thing to do about it. Under half a zero, under the score's tacet, or on a page left blank on purpose.
Report an issue with EmptyExample
arc
Nothing archived yet.
Archive a note to keep it out of the way without deleting it. It will wait here until you need it.
tacet
No replies yet.
When someone answers your thread, their reply appears here. Ask a question to start one.
blank
No drafts yet.
A draft keeps what you write until you publish it. Start one and it waits here.
Arc, at rest
Nothing archived yet.
Arc, reaching for the action
Nothing archived yet.
Tacet, at rest
No replies yet.
Tacet, reaching for the action
No replies yet.
Blank, at rest
No drafts yet.
Start one and it waits here.
Blank, reaching for the action
No drafts yet.
Start one and it waits here.
Install
Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base and button along.
npx shadcn@latest add https://Usage
import { Button } from "@/components/ui/button"import { Empty, EmptyActions, EmptyDescription, EmptyFigure, EmptyTitle } from "@/components/ui/empty"// Three ways to say there's nothing here yet, each with the one thing to do about it.export default function Example() {return (<div className="grid w-full gap-(--ot-space-9)"><div className="grid gap-4"><span className="ot-label">arc</span><Empty><EmptyFigure /><EmptyTitle>Nothing archived yet.</EmptyTitle><EmptyDescription>Archive a note to keep it out of the way without deleting it. It will wait here until you need it.</EmptyDescription><EmptyActions><Button>Archive a note</Button></EmptyActions></Empty></div><div className="grid gap-4"><span className="ot-label">tacet</span><Empty variant="tacet"><EmptyFigure>Tacet</EmptyFigure><EmptyTitle>No replies yet.</EmptyTitle><EmptyDescription>When someone answers your thread, their reply appears here. Ask a question to start one.</EmptyDescription><EmptyActions><Button>Ask a question</Button></EmptyActions></Empty></div><div className="grid gap-4"><span className="ot-label">blank</span><Empty variant="blank"><EmptyFigure>This space is left blank on purpose.</EmptyFigure><EmptyTitle>No drafts yet.</EmptyTitle><EmptyDescription>A draft keeps what you write until you publish it. Start one and it waits here.</EmptyDescription><EmptyActions><Button>Start a draft</Button></EmptyActions></Empty></div></div>)}const small = { inlineSize: "16rem" }Contract
- Underneath: native.
- Anatomy:
.ot-empty(data-variant="arc | tacet | blank") holding an optional.ot-empty-figure(aria-hidden, its text in a<span>), then.ot-empty-title, one sentence of direction, and one action. - An invitation to act, not a mood. Every variant answers the person reaching for the action (pointing at or focusing it;
data-force="hover"on the button pins it for the docs). arc(default): the zero is thin, wide and cropped to its top half, so "nothing" reads as the fermata's arc. Reaching for the action raises the arc a little.tacet: what a score prints on a part with nothing to play, "it is silent". The figure is the term (passTacet), set in the expression italic, as musical terms are, at the movement-title size. Reaching for the action is your entry, so the word dies away (morendo): it fades to the rule and its letters loosen a little.blank: the printer's page left blank on purpose. The words spread to the corners, as the posters' labels do: what is missing at the top start, what to do at the top end in a narrow ragged column, the action at the foot's end. The middle is silence with one small pencil line in it (the figure: "This space is left blank on purpose."). Reaching for the action, that line pales and loosens: it makes room. The region is at leastmin(34rem, 80vh)tall; right to left, the corners mirror.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
Empty | div | The root. Stacks its parts; the figure answers when you reach for the action. | |
variant | "arc" | "tacet" | "blank" | "arc" | arc: a zero cropped to its top half, which lifts as you reach for the action. tacet: the word a score prints on a part with nothing to play, set large in the italic; reaching for the action is your entry, so it dies away. blank: the page left blank on purpose; the title, the direction and the action spread to its corners, and one small line stands in the middle of the silence, loosening as you reach for the action. |
EmptyFigure | p | "0" | Decorative, so it is hidden from assistive technology. In arc, a number cropped to its top half. In tacet, pass the term: Tacet. In blank, pass the small line for the middle of the page, such as This space is left blank on purpose. |
EmptyTitle | p | Says what is missing, in a short sentence. | |
EmptyDescription | p | One or two lines on what to do next. Plain direction. | |
EmptyActions | div | Holds the action, set as a Button. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Empty state | SPECTRA crop | Half a zero, which is an arc |
| Tacet empty state | The score's tacet; "It has to be design." | The part's word for silence, set large in the italic |
| Blank empty state | A page left blank on purpose; "Renaissance." corners | The words at the corners, silence in the middle |
How it moves
| Component | Articulation | What moves |
|---|---|---|
| Empty state | Rise | The arc lifts as you reach for the action |
| Tacet empty state | Morendo | The word dies away to the rule and loosens as you reach for the action |
| Blank empty state | Making room | The middle line pales and loosens as you reach for the action |