Themes
Customize the look and feel of your empty states with built-in themes or create your own.
Built-in Themes
Hollows UI ships with three carefully designed themes. Each one controls the colors, border radius, spacing, typography, and illustration style of your empty states.
Minimal
Clean lines, muted palette, small illustrations. Ideal for developer tools, dashboards, and data-heavy applications.
No items yet
Create your first item to get started.
import { defineConfig } from 'hollows-ui'export default defineConfig({ theme: 'minimal',})Playful
Rounded corners, vibrant colors, larger illustrations with character. Great for consumer apps, social platforms, and creative tools.
No friends yet!
Invite someone to connect with.
import { defineConfig } from 'hollows-ui'export default defineConfig({ theme: 'playful',})Corporate
Professional typography, subtle borders, muted illustration palette. Designed for enterprise apps, B2B SaaS, and internal tools.
No reports available
Reports will appear here once data has been processed.
import { defineConfig } from 'hollows-ui'export default defineConfig({ theme: 'corporate',})Applying Themes
Set a theme globally in your config, or override it per-component using the theme prop.
// Per-component override<Hollow name="analytics" empty={!data} theme="corporate"> <AnalyticsChart data={data} /></Hollow>// Uses the global theme from config<Hollow name="notifications" empty={notifications.length === 0}> <NotificationList items={notifications} /></Hollow>Custom Themes
Use createTheme() to build a theme that matches your design system exactly.
import { defineConfig, createTheme } from 'hollows-ui'const brandTheme = createTheme({ name: 'brand', colors: { background: '#fafafa', foreground: '#1a1a1a', muted: '#6b7280', accent: '#6366f1', border: '#e5e7eb', }, typography: { headingFont: 'Inter, sans-serif', bodyFont: 'Inter, sans-serif', headingWeight: 600, headingSize: '1.125rem', bodySize: '0.875rem', }, spacing: { containerPadding: '2rem', illustrationGap: '1.5rem', ctaGap: '1rem', }, borders: { radius: '0.75rem', width: '1px', style: 'solid', }, illustrations: { maxWidth: 120, style: 'outline', // 'outline' | 'filled' | 'duotone' strokeWidth: 1.5, }, cta: { borderRadius: '0.5rem', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 500, },})export default defineConfig({ theme: brandTheme,})Every property is optional. Unset values fall back to the minimal theme defaults.
CSS Custom Properties
All theme values are exposed as CSS custom properties on the .hollows-root container. You can override them in your own CSS for fine-grained control.
/* Override specific theme tokens */.hollows-root { --hollows-bg: #ffffff; --hollows-fg: #111827; --hollows-muted: #6b7280; --hollows-accent: #3b82f6; --hollows-border: #e5e7eb; --hollows-radius: 12px; --hollows-heading-font: 'Inter', sans-serif; --hollows-heading-size: 1.125rem; --hollows-heading-weight: 600; --hollows-body-font: 'Inter', sans-serif; --hollows-body-size: 0.875rem; --hollows-illustration-max-width: 120px; --hollows-container-padding: 2rem; --hollows-cta-radius: 8px;}/* Dark mode overrides */@media (prefers-color-scheme: dark) { .hollows-root { --hollows-bg: #0a0a0c; --hollows-fg: #e8e8ec; --hollows-muted: #888892; --hollows-border: #1e1e22; }}Available CSS custom properties
| Property | Default (minimal) | Description |
|---|---|---|
| --hollows-bg | #0a0a0c | Container background |
| --hollows-fg | #e8e8ec | Heading text color |
| --hollows-muted | #888892 | Body/muted text color |
| --hollows-accent | #f0a030 | Accent/CTA color |
| --hollows-border | #1e1e22 | Border color |
| --hollows-radius | 8px | Border radius |
Runtime Theme Switching
Switch themes at runtime by passing a different theme to the HollowsProvider.
import { HollowsProvider } from 'hollows-ui/react'import { useState } from 'react'export function Providers({ children }) { const [theme, setTheme] = useState<'minimal' | 'playful' | 'corporate'>('minimal') return ( <HollowsProvider theme={theme}> <button onClick={() => setTheme('playful')}> Switch to Playful </button> {children} </HollowsProvider> )}