Components

Placeholder

Hint text for empty content: “Empty” values, untitled pages and blank blocks.

Empty

Usage

Use it to:

  • show that a value or page has no content yet

Don’t use it to:

  • input hints (use the field’s placeholder)
  • loading states (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';

Use it anywhere inside your app's <Theme> (see Installation):

/src/PlaceholderExample.tsx
import { Placeholder } from '@krackedui/motion';

export function PlaceholderDemo() {
  return (
    <Placeholder variant="ui">Empty</Placeholder>
  );
}

Examples

Variants

EmptyType something…New page

Dark theme

Empty

API Reference

Placeholder

A <span>; supports all of its props. Adds:

PropTypeDefault
variant
"block""title""ui"
"block"

Accessibility

  • Read as normal text (“Empty”), which is what an empty value should say. The title variant is lighter and meant for large text only.
© 2026 Motion. Internal documentation.