Illustrations

Pro

Theme-adaptive empty state illustrations that add clarity, personality, and guidance when there’s no data, no results, or no activity to show.

Preview

Usage

import { BarChartEmptyIllustration } from '@versaui/ui/assets/illustrations/BarChartEmptyIllustration';

export default function EmptyAnalytics() {
  return (
    <div className="flex flex-col items-center justify-center p-8 text-center">
      <BarChartEmptyIllustration size="medium" gridLines={true} />
      <h3 className="text-h7 text-[var(--color-neutral-text-strong)] mt-4">
        No analytics data
      </h3>
      <p className="text-b4 text-[var(--color-neutral-text-subtle)] mt-1">
        There are no metrics or activity records for this timeframe.
      </p>
    </div>
  );
}

Sizing

Illustrations support three responsive preset sizes as well as custom pixel values:

• small: 200×200px — Compact cards, sidebars, and nested widgets.
• medium (default): 240×240px — Standard modals, dashboard panels, and drawer empty states.
• large: 280×280px — Full-page empty states, hero sections, and onboarding screens.
• number: Any explicit pixel dimension (e.g., size={320}).

// Preset sizes
<BarChartEmptyIllustration size="small" />
<BarChartEmptyIllustration size="medium" />
<BarChartEmptyIllustration size="large" />

// Custom pixel dimension
<BarChartEmptyIllustration size={320} />

Grid Lines

Toggle geometric background grid lines via the gridLines prop:

• true (default): Displays subtle radial and axis grid lines that complement dashboard surfaces.
• false: Hides the background grid, leaving only foreground elements for a clean silhouette.

<BarChartEmptyIllustration gridLines={false} />

Button & Custom Icons

Supported illustrations feature an optional floating action button or counter badge overlay via the button prop (default true). Built using IllustrationButton, it supports custom icons while preserving the default add (Plus) and counter icons:

• true (default): Displays the default button (Plus icon for action illustrations, or counter badge for Mail and Notification).
• false: Hides the floating button.
• ReactNode: Renders a custom icon or element inside the button.

import { CalendarEmptyIllustration } from '@versaui/ui/assets/illustrations/CalendarEmptyIllustration';
import { Sparkle } from '@phosphor-icons/react';

// Default action button (Plus icon)
<CalendarEmptyIllustration button={true} />

// Hide the button
<CalendarEmptyIllustration button={false} />

// Custom icon inside the button
<CalendarEmptyIllustration button={<Sparkle size={16} weight="bold" />} />

Illustration Material

Empty state illustrations are built using IllustrationMaterial, a primitive component layered on top of the design system's Material foundation. It encapsulates glassmorphic outer/inner border gradients, backdrop blur, and composite illustration shadow tokens (--illustration-small-shadow, --illustration-medium-shadow, --illustration-large-shadow) that automatically adapt across light and dark themes.

Rendering Modes

IllustrationMaterial can be rendered inside SVG canvases via <foreignObject> or as a standard HTML container:

• SVG Canvas (default): Uses x, y, width, and height coordinates to position glassmorphic surfaces directly within an SVG illustration.
• HTML Container (asDiv): Renders a styled HTML <div> for custom composition outside of SVG viewports.

import { IllustrationMaterial } from '@versaui/ui/assets/illustrations';

// Within an SVG canvas
<svg viewBox="0 0 200 200">
  <IllustrationMaterial
    x={50}
    y={50}
    width={100}
    height={60}
    size="medium"
    surfaceColor="var(--color-neutral-surface-subtlest)"
    cornerRadius="var(--corner-radius-default-medium)"
  />
</svg>

// As a standalone HTML surface
<IllustrationMaterial asDiv size="medium">
  <div className="p-4">Custom Content</div>
</IllustrationMaterial>

Material Sizes

Three preset sizes define the default dimensions, corner radii, and elevation depth:

• small: 24×24px with --illustration-small-shadow and 4px corner radius.
• medium: 48×48px with --illustration-medium-shadow and 8px corner radius.
• large: 80×80px with --illustration-large-shadow and 8px corner radius.

Source Code

Browse the complete illustration source files below. Select a file from the tree to view its code:

Props