Isometric Empty State
Usage
A real "nothing here yet" pattern, not a demo of animation classes: an IsometricIllustration plus an animated glow backdrop plus heading/body/CTA. The glow-pulse and idle float together are the entrance-animation/reveal-on-load moment this component exists for — done entirely in CSS, no library.import { IsometricEmptyState } from '@summonware/ui';Best practices
DoUse it for a genuinely empty state — no results, no items yet, nothing configured — where a plain "No data" line would undersell a first-run moment.
Don'tReuse it for an error state. Pair a failure with a plain Alert instead — the warm, inviting glow reads wrong next to a failure message.
Anatomy
illustrationWhich IsometricIllustration variant sits above the copy.
title *Short, one line.
descriptionOptional supporting sentence.
actionOptional CTA, typically a Button.
Examples
Common configurations, variations and states.Empty inbox
No messages yet
New messages from your team will show up here.
The default illustration paired with a title, description, and a primary action.
Upload prompt
No files uploaded
Drag a file here, or browse from your device.
The upload illustration variant, for a file-drop or import-flow empty state.