Responsive
Hollows UI empty states adapt to any viewport size automatically.
Overview
Empty states generated by Hollows UI are responsive by default. Illustrations scale down, text reflows, and CTA buttons stack vertically on small screens. No extra configuration is needed for basic responsive behavior.
Mobile
Tablet
Desktop
Breakpoint Configuration
Customize the breakpoints used for responsive behavior. By default, Hollows uses the same breakpoint scale as Tailwind CSS.
| Name | Default | Behavior |
|---|---|---|
| sm | 640px | Stacked layout, small illustrations |
| md | 768px | Centered layout, medium illustrations |
| lg | 1024px | Horizontal layout available, full illustrations |
| xl | 1280px | Max-width capped, extra breathing room |
import { defineConfig } from 'hollows-ui'export default defineConfig({ responsive: { breakpoints: { sm: '480px', // custom mobile breakpoint md: '768px', lg: '1024px', xl: '1440px', // wider desktop }, },})Illustration Scaling
Illustration sizes adapt automatically at each breakpoint. You can customize the max-width at each size.
import { defineConfig } from 'hollows-ui'export default defineConfig({ responsive: { illustration: { sm: { maxWidth: 64, hidden: false }, md: { maxWidth: 96 }, lg: { maxWidth: 120 }, xl: { maxWidth: 160 }, }, },})Set hidden: true at any breakpoint to hide the illustration entirely. This is useful on very small screens where space is limited.
// Hide illustration on mobile, show from md upresponsive: { illustration: { sm: { hidden: true }, md: { maxWidth: 96 }, lg: { maxWidth: 120 }, },}Layout Adaptation
On smaller screens, empty states switch to a vertical (stacked) layout. On larger screens, a horizontal layout places the illustration alongside the text. Control this behavior with the layout option.
import { defineConfig } from 'hollows-ui'export default defineConfig({ responsive: { layout: { // Below md: always stack vertically sm: 'vertical', // md and up: use horizontal layout if illustration exists md: 'horizontal', // Or force vertical everywhere // sm: 'vertical', md: 'vertical', lg: 'vertical', }, maxWidth: { sm: '100%', md: '480px', lg: '560px', xl: '640px', }, },})Container Queries
By default, Hollows uses viewport-based breakpoints. Enable container queries to make empty states adapt based on their parent container width instead. This is ideal for dashboard widgets, sidebars, and other constrained layouts.
import { defineConfig } from 'hollows-ui'export default defineConfig({ responsive: { strategy: 'container', // 'viewport' (default) | 'container' },})With container queries enabled, the .hollows-root element gets container-type: inline-size and all responsive rules use @container instead of @media.
Hiding Elements at Breakpoints
Control which parts of the empty state are visible at each breakpoint.
import { defineConfig } from 'hollows-ui'export default defineConfig({ responsive: { visibility: { illustration: { sm: false, md: true }, body: { sm: false, md: true }, cta: { sm: true, md: true }, heading: { sm: true, md: true }, }, },})In this example, on small screens only the heading and CTA are shown. The illustration and body text appear from the md breakpoint and up.