EmptyState Component
React empty state component with icon, title, description and call-to-action slot for no-results and empty-list screens — built with Tailwind CSS.
Import
1import { EmptyState } from "@neuctra/ui";Basic Usage
No projects yet
Create your first project to get started.
With Icon & Action
No files uploaded
Drag and drop files here, or click the button below.
Search Results
No results for “tabel”
Check the spelling or try a different keyword.
Props
All available props for the EmptyState component.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Headline (required) |
| description | ReactNode | — | Supporting copy under the title |
| icon | ReactNode | Inbox icon | Icon shown in the muted circle |
| action | ReactNode | — | Call-to-action slot (usually a Button) |
| size | "sm" | "md" | "lg" | "md" | Scales padding, icon and text together |
| iconClassName | string | — | Styles the icon wrapper circle. |
| titleClassName | string | — | Styles the title heading. |
| descriptionClassName | string | — | Styles the description text. |
| actionClassName | string | — | Styles the wrapper around the action slot. |
Accessibility
- The title renders as a semantic <h3>; the icon is decorative (aria-hidden).
- Place focus on the action button after content loads empty, if the state is unexpected.
Frequently Asked Questions
How do I install and import the EmptyState component?
Install the @neuctra/ui package, then import it with: import { EmptyState } from "@neuctra/ui";
What variants and sizes does EmptyState support?
EmptyState supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the EmptyState component accessible?
EmptyState is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.