Neriov0.1.0-alpha.1
GitHub

Composition Gallery

Empty states

Six realistic absence states that test concise explanation, clear actions, and neutral visual hierarchy.

Overview

Compares repeated EmptyState compositions across expected, filtered, offline, and permission-limited situations.

Live Preview

No data

Create the first record to begin.

No search results

Try a broader search term.

No notifications

You are all caught up.

No projects

Start a project for your team.

Offline

Reconnect to update this view.

Permission denied

Ask an owner for access.

Code

<EmptyState><EmptyStateHeader><EmptyStateTitle>No projects</EmptyStateTitle><EmptyStateDescription>Start a project for your team.</EmptyStateDescription></EmptyStateHeader><EmptyStateActions><Button>Create project</Button></EmptyStateActions></EmptyState>

Components Used

EmptyStateButton

Accessibility

Each state is structured with an explicit heading and descriptive text; the decorative mark remains hidden from assistive technology.

Responsive Behaviour

Cards remain usable in a single column and action pairs wrap without reducing tap targets.

Notes

Product-specific illustrations, recovery flows, and permission requests belong to the app or a future Pro template—not Core.