Empty state component library with illustrated variants
Views
1.3K
Copies
328
Likes
249
Comments
0
Copy rate
25.0%
Prompt
Build a reusable EmptyState component system in React + Tailwind for a [product_type]. It should handle at least five contexts: [contexts_list].
Requirements:
- A single flexible EmptyState component that accepts variant, illustration, title, description, and action props
- Inline SVG illustrations for each variant (no external image dependencies)
- Dark and light mode via CSS variables (no Tailwind dark: prefix)
- Accessible: proper heading hierarchy, role="status" where appropriate
- Optional secondary action
- Skeleton-to-empty transition consideration
- Export named variants (EmptyInbox, EmptySearch, EmptyError, etc.) that preset the main component
Make it feel polished and human — the illustrations should have personality without being childish.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
Build a reusable EmptyState component system in React + Tailwind for a [product_type]. It should handle at least five contexts: [contexts_list].
Requirements:
- A single flexible EmptyState component that accepts variant, illustration, title, description, and action props
- Inline SVG illustrations for each variant (no external image dependencies)
- Dark and light mode via CSS variables (no Tailwind dark: prefix)
- Accessible: proper heading hierarchy, role="status" where appropriate
- Optional secondary action
- Skeleton-to-empty transition consideration
- Export named variants (EmptyInbox, EmptySearch, EmptyError, etc.) that preset the main component
Make it feel polished and human — the illustrations should have personality without being childish.
Example output
UI Preview
This content is user-generated and runs in a sandboxed environment.