A zero-data state with four floating inline illustrations, a title, a description and primary and secondary actions.
Saved listings will show up here.
npx shadcn@latest add https://hyperblur.dev/r/empty-state.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/empty-state.tsx.
import { EmptyState } from "@/components/hyperblur/empty-state"
<EmptyState illustration="search" title="No results" description="Try a different keyword." primaryAction={{ label: "Clear filters" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| illustration | "inbox" | "search" | "folder" | "chart" | "none" | "inbox" | Built-in illustration. none hides it. |
| title | ReactNode | "Nothing here yet" | Heading. Pass a styled node to change the typeface. |
| description | ReactNode | Supporting sentence under the title. | |
| primaryAction | { label: string; onClick?: () => void; href?: string } | Filled pill button. Renders a link when href is set. | |
| secondaryAction | { label: string; onClick?: () => void; href?: string } | Quiet ghost button next to the primary one. | |
| size | "md" | "sm" | "md" | sm shrinks the artwork, spacing and type for small panels. |
| accent | string | "#2f7bff" | Accent color used inside the illustrations and for the focus ring. |