KB-224 · EMPTY/FIRST/LIGHT
First Light Empty State
The first minute of a product, treated as a moment rather than an apology: a dashed intake frame where the work will soon live, three concrete first moves arriving on the cascade, and one primary action. No sad illustration, no nothing-here-yet — the empty state is a runway, and it says which way to take off.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/empty-first-light
Props
- art
- React.ReactNode
- default —
- Optional illustration seated above the copy; decorative.
- actions
- FirstAction[]
- default —
- Three concrete first moves, each a real button.
- headline / copy / primaryCta
- string
- default —
- What this place becomes, and the main way in.
| Prop | Type | Default | Description |
|---|---|---|---|
| art | React.ReactNode | — | Optional illustration seated above the copy; decorative. |
| actions | FirstAction[] | — | Three concrete first moves, each a real button. |
| headline / copy / primaryCta | string | — | What this place becomes, and the main way in. |