# Empty state
> Empty state with one of four pixel illustrations that drop into place and float, plus a title, a line of help and room for actions.
- React: `import { PxEmpty } from "@/components/lumesec/px-empty"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-empty.json
- Page: https://elements.lumesec.ai/components/pixel-ui/empty



Live preview: https://elements.lumesec.ai/view/px-empty

Demo source:

```tsx
"use client";

import * as React from "react";

import { PxEmpty, type PxEmptyKind } from "@/components/lumesec/px-empty";

const controlButton =
  "h-[30px] rounded-lg border border-border bg-card px-[11px] font-[inherit] text-[12.5px] font-medium text-foreground hover:border-[color-mix(in_srgb,var(--lumesec)_50%,var(--border))]";

const KINDS: Array<{ kind: PxEmptyKind; label: string }> = [
  { kind: "inbox", label: "Inbox" },
  { kind: "search", label: "Search" },
  { kind: "error", label: "Error" },
  { kind: "done", label: "Done" },
];

export default function PxEmptyDemo() {
  const [kind, setKind] = React.useState<PxEmptyKind>("search");

  return (
    <div className="grid w-full max-w-[380px] gap-[14px]">
      <PxEmpty kind={kind}>
        <button type="button" className={controlButton}>
          Clear search
        </button>
      </PxEmpty>
      <div className="flex flex-wrap justify-center gap-1.5">
        {KINDS.map((item) => (
          <button key={item.kind} type="button" className={controlButton} onClick={() => setKind(item.kind)}>
            {item.label}
          </button>
        ))}
      </div>
    </div>
  );
}
```

## Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

## Installation

```bash
npx shadcn@latest add @lumesec/px-empty
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-empty.json
```

## Usage

React:

```tsx
import { PxEmpty } from "@/components/lumesec/px-empty";

export function Example() {
  return (
    <PxEmpty kind="search">
      <button type="button">Clear search</button>
    </PxEmpty>
  );
}
```

## Behaviour

Four pixel illustrations that drop into place and float gently, with a title, a line of help and a slot for actions.

## API reference

### Props

Also accepts every prop of `<div>` (`React.ComponentProps<"div">`), spread onto the root element.

| Prop          | Type                                       | Default    | Description                                                                                    |
| ------------- | ------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------- |
| `kind`        | `"inbox" \| "search" \| "error" \| "done"` | `"inbox"`  | Illustration and default copy. Changing it drops the new illustration in.                      |
| `heading`     | `React.ReactNode`                          | `per kind` | Title. Defaults to "No messages yet", "No results", "Something went wrong" or "All caught up". |
| `description` | `React.ReactNode`                          | `per kind` | Help line under the title. Defaults to a sentence for the kind.                                |
| `children`    | `React.ReactNode`                          | —          | Actions, such as buttons, centred under the text.                                              |

### Ref

`ref` points at the root `HTMLDivElement`.

## Accessibility

* The illustration canvas is `aria-hidden`.
* The title is an `<h3>`; the heading level cannot be changed.
* Reduced motion: the pixels appear in place without dropping, and the floating and sparkles are off.

## Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--foreground`, `--muted-foreground`, `--lumesec`, `--lumesec-shine`, `--lumesec-warning` and `--lumesec-success`.

## Notes

* `error` draws in the warning colour and `done` in the success colour; the other kinds use the accent.
* Without reduced motion the illustration animates continuously while it is on screen.