ns-ui
An empty state that pings like sonar every 6-8s to actively demonstrate emptiness, then freezes and grows skeleton rows outward the instant real results interrupt it.
Use when one region has to carry empty, probing and loaded in a single vocabulary rather than handing an illustration off to an unrelated skeleton, since a null items prop makes it ping and arriving results interrupt the ping and grow rows outward from it; pick empty-state-dashed instead when the region is only ever empty and the CTA is the point, or skeleton-develop when a fetch is definitely in flight and there is no empty case to represent.
Install
npx shadcn add https://design.helpmarq.comns-ui / empty-state-sonar — a probe that the results interrupt
search · “invoice”
No results for "invoice"
| Prop | Type | Default | Description |
|---|---|---|---|
| items | EchoSoundItem[] | null | — | null = nothing has resolved yet (the ring probes). An array — including an empty one — means the search settled; non-empty triggers the reveal. |
| query? | string | — | Named in the empty-state copy: `No results for "${query}"`. |
| rowHeight? | number | — | Row height in px — also what the ring's contact radius targets. |
| rowGap? | number | — | Gap between rows, px. |
| stageRows? | number | — | Rows the stage reserves height for while probing (usually your expected count). |
| className? | string | — | — |