Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Standard

Empty with Link in Description Empty State for React

An empty favorites state with a Learn more link inside its description.

Framework
UI library

An empty state with help built into the sentence. The description says favorites will appear here, then links to Learn more about favorites; EmptyDescription underlines a link inside it. Use it when the extra information is optional and doesn't deserve a button.

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

How is that anchor styled?

EmptyDescription underlines its direct anchors and offsets the underline. On hover the link uses the primary color. The anchor in this file has no class of its own.

What icon is above the title?

StarIcon in EmptyMedia with variant="icon". EmptyTitle is "No favorites yet".

Does the link leave the page?

href="#" stays on this page. Point it at the favorites docs. The anchor has no target.

Where would a button go?

This file has no EmptyContent. The anchor in EmptyDescription is the only action. Add EmptyContent with a Button when you want a button under the text.

Is the inline link reachable from the keyboard?

Yes. It is a real anchor, so Tab focuses it and Enter follows href. "Learn more about favorites" is its accessible name. Hide StarIcon with aria-hidden.

All 22 empty state examples