Illustrations
Browse all 13 built-in illustrations and learn how to add your own.
Illustration Gallery
Hollows UI includes 13 built-in illustrations, each designed for a common empty-state scenario. The CLI automatically selects the best match based on your component classification.
Using Illustrations
Illustrations are assigned automatically during npx hollows-ui build. The CLI classifies your component (inbox, cart, table, etc.) and selects the matching illustration. You can also specify one manually:
<Hollow name="user-inbox" empty={data?.length === 0} illustration="empty-inbox"> {data && <InboxList items={data} />}</Hollow>You can also override the illustration in the generated JSON registry:
{ "user-inbox": { "illustration": "empty-inbox", "heading": "Your inbox is empty", "body": "New messages will appear here.", "cta": { "label": "Compose", "action": "navigate:/compose" } }}Custom Illustrations
Register your own SVG illustrations to use across your application. Custom illustrations integrate seamlessly with theming and responsive scaling.
import { defineConfig, registerIllustration } from 'hollows-ui'registerIllustration('custom-rocket', { svg: ` <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M32 8c-4 8-4 20 0 32 4-12 4-24 0-32z" stroke="currentColor" stroke-width="1.5" fill="none" /> <circle cx="32" cy="28" r="4" stroke="currentColor" stroke-width="1.5" fill="none" /> <path d="M24 36l-6 8h12M40 36l6 8H34" stroke="currentColor" stroke-width="1.5" fill="none" /> <path d="M28 44h8v6h-8z" stroke="currentColor" stroke-width="1.5" fill="none" /> </svg> `, // Optional: provide variants for different themes variants: { playful: `<svg><!-- playful version --></svg>`, corporate: `<svg><!-- corporate version --></svg>`, },})export default defineConfig({ illustrations: { custom: ['custom-rocket'], },})Then use your custom illustration by name:
<Hollow name="onboarding" empty={!started} illustration="custom-rocket"> <OnboardingFlow /></Hollow>Illustration Styles
Built-in illustrations support three rendering styles. The style is controlled by your theme configuration.
Outline
Stroke-only, clean lines
Filled
Solid fills, bold shapes
Duotone
Stroke + translucent fill
import { defineConfig } from 'hollows-ui'export default defineConfig({ theme: { illustrations: { style: 'duotone', // 'outline' | 'filled' | 'duotone' strokeWidth: 1.5, maxWidth: 120, }, },})