27 editorial illustrations. Each ships as SVG with CSS-variable hooks so tenant branding flows through without recolouring the asset.
27 total
empty state
No matches yet
empty-matches No licenses issued
empty-licenses No tenants configured
empty-tenants No competitions scheduled
empty-competitions No recent activity
empty-activity No invoices issued
empty-invoices No ranking data
empty-ranking No webhooks configured
empty-webhooks No audit entries
empty-audit-log No results yet
empty-results onboarding
Welcome
onboarding-welcome Choose your federation
onboarding-choose-federation Register your first member
onboarding-first-member Create your first competition
onboarding-first-competition Process your first payment
onboarding-first-payment You are ready
onboarding-complete error
Page not found
error-404 Server error
error-500 You are offline
error-offline Scheduled maintenance
error-maintenance Permission denied
error-permission-denied celebration
First win
celebration-first-win New personal best
celebration-personal-best Qualified for finals
celebration-finals-qualified Ranking milestone
celebration-ranking-milestone session
Sign out
signout-confirmation Session expired
session-expired tsx · view.tsx
import { Illustration } from '@petanque-life/shared/illustrations';
<Illustration name="empty-matches" size={320} />
<Illustration name="celebration-first-win" tone="accent" />| Prop | Type | Default | Description |
|---|---|---|---|
| name | IllustrationName | — (required) | One of 27 names in the registry. |
| size | number | 320 | Width in pixels. Aspect ratio is preserved. |
| tone | "brand" | "accent" | "muted" | "brand" | Stroke colour via CSS variable override. |
| background | "paper" | "none" | "paper" | Whether to render the ivory paper backdrop. |