Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Actions

Empty with Multiple Actions Empty State for React

An empty upload state with Upload File and Import from URL buttons side by side.

Framework
UI library

An empty state with two ways to add content. Under an upload icon, the title No files uploaded and a description, a row holds Upload File and an outline Import from URL, each with an icon before its label. Use it when content can come from the reader's computer or from the web.

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 are Upload File and Import from URL shown?

Both are in a div with flex gap-2 inside EmptyContent. Upload File is a default Button with an UploadIcon icon. Import from URL is variant="outline" with a LinkIcon icon.

Does the header use the same icon?

Yes. UploadIcon is in EmptyMedia with variant="icon", and the Upload File button uses UploadIcon again. Import from URL uses LinkIcon.

What does the description say?

EmptyTitle is "No files uploaded". EmptyDescription says to upload files from the computer or import from a URL.

Which button is the filled one?

Upload File has no variant, so it is the default filled button. Import from URL sets variant="outline".

Do the buttons upload or import anything?

No. They are labels and icons only. Attach the upload handler to Upload File and the URL flow to Import from URL.

Are the icons part of the button names?

The names are the text labels. Mark every UploadIcon and the LinkIcon icon aria-hidden, including the one in EmptyMedia.

All 22 empty state examples