Illustration

Illustrations add brand personality to the product. The Next Gen package ships curated raster illustrations as React components with light and dark artwork and optional theme integration via @camp/core.

Overview

Resources

Install


yarn add @camp/illustration

Usage

Import the illustration you need from @camp/illustration and render it like any image.


import { Customization } from '@camp/illustration';
 
<Customization />;

Search All Illustrations

Variations

Example

Use for empty states or file-related messaging where a folder metaphor fits.


import { Folder } from '@camp/illustration';
 
<Folder />;

Warning X

Use for error or blocking states that need a clear warning visual.


import { WarningX } from '@camp/illustration';
 
<WarningX />;

Not Themed

Use when search failed or returned no meaningful results.


import { WarningSearch } from '@camp/illustration';
 
<WarningSearch themed={false} />;

Usage

Best practices

Pair every illustration with a heading or body copy so meaning does not depend on the image alone.
Keep layout responsive: components use max-width: 100%; constrain width with CSS in the parent if needed.
Prefer the smallest illustration that reads clearly in context.

Content guidelines

✅ DO

Use illustrations to reinforce messaging in empty states and onboarding
Turn on themed inside themed product surfaces for correct light/dark artwork
Provide descriptive alt text when the image is not purely decorative

🚫 DON’T

Do not use illustrations as the only cue for critical actions or errors
Do not stretch illustrations in ways that distort aspect ratio
Do not assume Camp 1 SVG token names map one-to-one to Next Gen exports

Accessibility

Components render an img with role="presentation" and an empty alt by default, which treats them as decorative.
When an illustration communicates specific information, set a concise alt and/or title so assistive technologies can describe it.
All standard image attributes from React.ImgHTMLAttributes are forwarded to the underlying img.

Similar components

Icon

A small graphical representation of a program or function.