Back to Design System
Illustrations
A collection of reusable SVG illustrations for UI states, empty pages, and visual context.
1. Box Illustrations
A set of box-themed illustrations, available in three sizes: sm, md, and lg.
import { Illustration } from "@/components/illustrations";
<Illustration type="box" size="sm" />
<Illustration type="box" size="md" />
<Illustration type="box" size="lg" />2. Cloud Illustrations
Cloud-style illustrations to represent storage, upload, or connectivity concepts.
<Illustration type="cloud" size="sm" />
<Illustration type="cloud" size="md" />
<Illustration type="cloud" size="lg" />3. Credit Card Illustrations
Useful for payment screens, checkout states, or billing pages.
<Illustration type="credit-card" size="sm" />
<Illustration type="credit-card" size="md" />
<Illustration type="credit-card" size="lg" />4. Documents Illustrations
Perfect for file management, upload, or empty document states.
<Illustration type="documents" size="sm" />
<Illustration type="documents" size="md" />
<Illustration type="documents" size="lg" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "box" | "cloud" | "credit-card" | "documents" | — | Defines which illustration to render. |
| size? | "sm" | "md" | "lg" | "md" | Controls the rendered size of the illustration. |
| className? | string | — | Optional class names to customize styles. |