EmptyStateIllustration

Ready-made SVG illustrations for empty states, onboarding and zero-data screens.

Import


import { EmptyStateIllustration } from "@raydenui/ui";

Usage

Basic

name is required and selects the illustration.

Preview


<EmptyStateIllustration name="inbox" />

Available illustrations

Preview

calendar, chat, contacts, dashboard, favorites, file-manager, forms, gallery, inbox, invoice, notifications, product-catalog, project-list, search, shopping-cart, subscriptions, survey, task-templates, team.


<EmptyStateIllustration name="inbox" size={120} />
<EmptyStateIllustration name="search" size={120} />
<EmptyStateIllustration name="file-manager" size={120} />
<EmptyStateIllustration name="notifications" size={120} />

Size

size is a number in pixels, applied to both width and height. It defaults to 150, the native SVG size.

Preview


<EmptyStateIllustration name="gallery" size={96} />
<EmptyStateIllustration name="gallery" size={150} />
<EmptyStateIllustration name="gallery" size={220} />

Monochrome

Set colored={false} for the grey variant, useful on busy or tinted backgrounds.

Preview


<EmptyStateIllustration name="team" />
<EmptyStateIllustration name="team" colored={false} />

Custom palette

palette replaces the default primary palette on coloured illustrations. Provide 11 hex colours, lightest to darkest. It is ignored when colored is false.

Preview


<EmptyStateIllustration
  name="dashboard"
  palette={[
    "#e3effc", "#c6ddf7", "#b6d8ff", "#80bbff", "#3d89df", "#1671d9",
    "#0d5eba", "#034592", "#04326b", "#012657", "#001633",
  ]}
/>

In an empty state

Preview

No results found

Try a different search term or clear your filters.


<div className="flex flex-col items-center gap-4 text-center">
  <EmptyStateIllustration name="search" size={140} />
  <div>
    <h3 className="text-lg font-semibold text-grey-900">No results found</h3>
    <p className="text-sm text-grey-500">Try a different search term or clear your filters.</p>
  </div>
  <Button>Clear filters</Button>
</div>

Props

Prop	Type	Default	Description
`name`	`IllustrationName`	—	Which illustration to display (required)
`colored`	`boolean`	`true`	Coloured or grey/monochrome variant
`palette`	`string[]`	—	11 hex colours, lightest → darkest. Ignored when `colored` is `false`
`size`	`number`	`150`	Width and height in pixels
`className`	`string`	—	Additional CSS classes

Accessibility

The illustration is decorative, so it is hidden from assistive technology. Put the meaning in adjacent text — a heading and a short explanation — rather than in the image.
Pair it with an action so an empty state tells the reader what to do next.