Empty states.
Automatically generated.
hollows scans your real UI, detects data-dependent sections, and generates contextual empty states — with illustrations, copy, and CTAs — that stay in sync with your actual layout.
No manual placeholder design. No hand-written copy. Wrap your component in <Hollow> and ship polished empty states instantly.
See it in action
Toggle between component types and themes to see what hollows generates.
Q1 Design Review
API Integration Update
Sprint Retro Notes
New feature proposal
No messages yet
When you receive messages, they'll appear right here.
How you use it
Wrap your component
import { Hollow } from 'hollows-ui/react'// CTA button shown by default<Hollow name="user-inbox" empty={data?.length === 0}> {data && <InboxList items={data} />}</Hollow>// Hide the CTA button<Hollow name="user-inbox" empty={data?.length === 0} showCta={false}> {data && <InboxList items={data} />}</Hollow>Run the CLI once
npx hollows-ui buildAuto-detects your components, classifies them, and generates contextual empty states. Writes JSON + illustrations to src/hollows/.
Import the registry once
import './hollows/registry'Add this to your app entry. Every <Hollow> auto-resolves by name.
Features
Everything you need for polished empty states, out of the box.
~5KB runtime
The React component is tiny. Empty state data is static JSON.
12+ built-in illustrations
Minimal line-art SVGs that adapt to your color scheme.
Contextual copy
Headlines, descriptions, and CTAs generated from your component structure.
Theme-aware
Inherits your app's colors, fonts, and border radii automatically.
Incremental builds
Only regenerates changed components. Fast builds every time.
Framework agnostic
React, Vue, Svelte, Angular adapters. Use it anywhere.
Ready to get started?
Install hollows-ui and ship polished empty states in minutes, not hours.