feedback
Empty State
A named absence — no results, no items yet — with a clear next action instead of a blank region.
- feedback
- empty
- zero-state
- onboarding
Live preview
No projects yet
Create your first project to get started.
Quick usage
import { EmptyState } from "@pinky-ui/systems";
<EmptyState title="No projects yet" description="Create your first project to get started." action={{ label: "New project", onClick: create }} />Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add empty-statePrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Pointer and keyboard paths expose the same state change.
- Status and focus remain meaningful when motion is disabled.
Performance
- Uses local state and transforms; no per-frame React pointer loop.
Reduced motion
Resolves state changes without layout animation while preserving semantics.
When to use
- Product workflows with a clear reversible or inspectable state.
When not to use
- Decorative motion without a user task.
Skill
Purpose
A named absence — no results, no items yet, nothing here — with a clear next action, instead of a blank region the user has to interpret for themselves.
Use when
A list, table or collection has genuinely nothing to show: a fresh workspace, a filtered view with no matches, a search with no results.
Avoid
- A loading placeholder — that's Skeleton Morph or Shimmer Surface, not this
- An error — say what failed and how to recover, don't relabel it "empty"
- Filling every empty list with a large illustration; a small icon and one clear sentence is usually enough
Usage
<EmptyState
title="No projects yet"
description="Create your first project to get started."
action={{ label: "New project", onClick: create }}
/>Accessibility
role="status" announces the empty state as it appears; the action, when present, is a real button reachable by keyboard like any other.
Keyboard and touch
The optional action button behaves like any other button — no special handling required.
Composes with
Filter Rail and search results: an empty state after filtering should say what was searched for and offer to clear the filter, not just repeat "no projects yet" verbatim.