Getting Started

Installation

Fundamentals

Components

Animations

FadeComing Soon
Infinite ScrollComing Soon
PointerComing Soon

components

Empty Component

A flexible placeholder component for displaying empty states, no data screens, and error messages in React applications.

Source Code

Empty State Header

Message to help users create or search data values for this placeholder

Installation


pnpm dlx radianui@latest add empty

Usage

Imports

/components/ui/empty.tsx

import {
	Empty,
	EmptyAction,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from "@/components/ui/empty"

Code

/components/ui/empty.tsx

<Empty>
	<EmptyMedia>
		<EmptyIcon />
	</EmptyMedia>
	<EmptyHeader>
		<EmptyTitle>No results found</EmptyTitle>
		<EmptyDescription>
			Please try using a different keyword or update your search filters
		</EmptyDescription>
	</EmptyHeader>
	<EmptyAction>
		<Button>Clear filters</Button>
	</EmptyAction>
</Empty>

Examples

No Projects Yet

You don’t have any projects yet. Create your first one to get started

No Search Results

No results found. Try different keyword or adjusting your search filters

No Internet Connection

You’re offline. We’ll reconnect automatically when you’re back online

Unexpected Error

Something went wrong. Please try again later or refresh the page

No Messages

Empty Inbox

Start chatting to see your messages here

No Notifications

All caught up!

You’re all caught up. No new notifications

No Files Uploaded

Once you upload, your files will show up here

No Comments Yet

Be the first to comment on this post

No Recent Activity

Action you take will appear here

No Reports Yet

No Reports

You don not have any reports yet.

No Such Directory

No Such Directory Found

Please try using a different keyword or update your search filters

Props

<Empty>

Name	Default	Values
className	-	string

Name	Default	Values
variant	default	defaulticon
className	-	string

Name	Default	Values
className	-	string

Name	Default	Values
className	-	string

Name	Default	Values
className	-	string

Name	Default	Values
className	-	string