Illustration

SVG illustrations for empty states, errors, success messages, and more.

Types

Six illustration types for common UI states.

Types

Cloud

Empty

Error

Success

Search

Lock

Sizes

Three sizes: sm (120px), md (200px), lg (280px).

Sizes

Usage

Import and use the Illustration component.

tsx
import { Illustration } from "@/components/ui/Illustration";

<Illustration type="cloud" size="lg" />
<Illustration type="empty" size="md" />
<Illustration type="error" size="sm" />

Props

PropTypeDefaultDescription
type"cloud" | "empty" | "error" | "success" | "search" | "lock""cloud"Illustration type.
size"sm" | "md" | "lg""md"Illustration size.