# Empty

- Page: <https://kznlabs.github.io/labsUI/components/empty>

## Empty (`empty`, component)

Server-safe empty state: icon tile, title, one helpful sentence and the next action. Bordered variant for empty lists and drop zones.

- Install: `npx @kznlabs/labsui add empty`
- Docs: <https://kznlabs.github.io/labsUI/components/empty>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Empty>` (+ <div> props): Empty state: icon tile, title, one helpful sentence, and the next action as children.
  - `title: ReactNode`: What is empty, e.g. "No clips yet".
  - `bordered?: boolean` = `false`: Dashed outline, for an empty area inside a page (drop zone, empty list).
  - `description?: ReactNode`: What to do about it.
  - `icon?: ReactNode`: Shown in a rounded tile, like an app icon.

### Usage

```tsx
<Empty icon={<Film />} title="No clips yet" description="Upload your first clip."><Button size="sm">Upload</Button></Empty>
```

### Example: no-clips.tsx

```tsx
import { Film, Upload } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Empty } from "@/components/ui/empty";

export function NoClips() {
  return (
    <Empty bordered icon={<Film />} title="No clips yet" description="Upload a video from your computer.">
      <Button size="sm"><Upload />Upload clip</Button>
    </Empty>
  );
}
```