Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Actions

Empty with Input Action Empty State for React

An empty state with a newsletter signup: an email field and a Subscribe button.

Framework
UI library

An empty state that collects something. Under a mail icon, the title and a description, EmptyContent holds an email Input and a Subscribe button on one row. Use it for a newsletter signup, a waitlist or an invite field where a list would otherwise be blank.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What kind of input is in the empty state?

An Input with type="email", placeholder="Enter your email" and aria-label="Email", since there is no visible label. It sits beside a Subscribe Button in a div with flex w-full gap-2, inside EmptyContent.

What do the title and description say?

EmptyTitle is "Subscribe to our newsletter". EmptyDescription says the latest updates and news are delivered to the inbox.

Where is the mail icon?

MailIcon is in EmptyMedia with variant="icon", above the title. The input row does not repeat it.

Why is the row full width?

EmptyContent is a centered column with a max width. w-full on the flex row fills that width. Input is w-full and min-w-0, so the field uses the leftover space beside Subscribe.

Does Subscribe validate or submit the email?

No. The file sets type="email" and the placeholder, and the button has no handler. Add the submit yourself, for example by wrapping the row in a form.

What is the button's name?

Subscribe, from its text. Mark MailIcon aria-hidden. The placeholder is not a name once the field has a value.

All 22 empty state examples