Empty State Card

A centered icon/illustration slot, title, description and a guidance button for empty content areas.

cards
card
structural
empty-state

No projects yet

Create your first project to get started.

New project

Quick usage

usage

import { EmptyStateCard } from "@pinky-ui/components";

<EmptyStateCard
  title="No projects yet"
  description="Create your first project to get started."
  action={<PrimaryButton>New project</PrimaryButton>}
/>

Presets

Default

Title, description and a CTA.

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add empty-state-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
icon	ReactNode	—	An illustration or icon, sized by the caller — no built-in artwork.
title	ReactNode	—	Required.
description	ReactNode	—	Optional.
action	ReactNode	—	The guidance CTA — usually a button.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
padded	boolean	true	Inner content padding.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair.

Accessibility

Not focusable as a whole; the action button carries its own accessible name.
The icon slot has no built-in alt text — a caller passing an <img> or decorative SVG owns its own accessible treatment.

Reduced motion

No motion of its own.

When to use

A list, table or dashboard section with genuinely no content yet

When not to use

An error or failed-load state — that's Notification Card's job