Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Empty with Input Action
A React empty state with email input and subscribe button for newsletter signup or lead capture forms
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Empty states can convert—newsletter signups transform blank space into lead generation. This React empty state uses shadcn/ui Empty component with Mail icon from Lucide React featuring Input with email type and Subscribe Button in horizontal flex layout. Built with w-full width control and gap spacing. The input action empty state pattern captures information—perfect for newsletters, waitlists, email capture, or anywhere empty moments become conversion opportunities.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Single Action
Simple button-only empty state
Multiple Actions
Two action button choices
Input Component
Email and text inputs
Button Component
Submit button
Form Component
Form validation patterns
Dialog Component
Newsletter signup modal