Components

EmptyState

What to show when there is nothing yet: a quiet icon, a one-line title, a sentence of help and the next action.

Usage

Use it for:

  • First-run states with a clear next action.
  • No search or filter results (say how to widen the search).

Avoid it when:

  • Something failed: use an Alert with a retry.
  • Content is loading: use Skeleton.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

With action

No accounts connected

Connect a bank account to import transactions automatically.

Small, inside a card

Tasks due this week

All caught up

Nothing is due before Friday.

API Reference

EmptyState

A <div>; other <div> props are forwarded. Children render under the description.

PropTypeDefault
icon
IconName
title
ReactNode
description
ReactNode
action
ReactNode
size
"sm""md"
"md"
className
string

Accessibility

No keyboard interaction of its own.

ARIA and semantics:

  • Title and description are plain text in reading order; the icon is decorative.
  • The action is whatever you pass (a real button or link), so it keeps its own semantics.
© 2026 Motion. Internal documentation.