ns-ui
Empty state modeled on a workshop pegboard — dashed silhouettes preview the exact card/avatar/title geometry of future items, and creating one hangs it onto its shadow with a spring settle.
Use when Pick empty-state-pegboard over empty-state-dashed when the list has a known, repeatable item shape (a card row: avatar, title, subtitle) worth teaching before any data exists — the dashed silhouettes are that shape's own markup, previewing layout and count. empty-state-dashed is for a single boundary with no item geometry to preview at all (one CTA in one drifting frame); reach for it when the future content has no fixed per-row shape to show. Neither is skeleton-develop, which stands in for content that already exists and is mid-fetch — empty-state-pegboard's silhouettes are prescriptive (what will exist once you act), not a loading placeholder for something already on its way.
Install
npx shadcn add https://design.helpmarq.comns-ui / empty-state-pegboard — an empty list that previews its own layout
No projects yet. Created projects will appear here.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ShadowBoardItem[] | — | real items already created, in display order — this component never invents one itself |
| slots? | number | — | number of silhouette slots the board previews; extra items beyond this render without a paired shadow |
| title? | string | — | — |
| description? | string | — | plain-text empty-state copy, exposed as the region's description |
| createLabel? | string | — | — |
| onCreate? | () => void | — | fired when the create button is pressed — this component does not append the item itself |
| className? | string | — | — |