Empty

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

npx @kznlabs/labsui add empty

No clips yet

Record a moment in-game with Alt+F10, or upload a video from your computer.

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>  );}

<Empty>

Empty state: icon tile, title, one helpful sentence, and the next action as children.

title*
ReactNode
What is empty, e.g. "No clips yet".
bordereddefault false
boolean
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.

Prop	Type	Default
`title*` What is empty, e.g. "No clips yet".	`ReactNode`	—
`bordered` Dashed outline, for an empty area inside a page (drop zone, empty list).	`boolean`	`false`
`description` What to do about it.	`ReactNode`	—
`icon` Shown in a rounded tile, like an app icon.	`ReactNode`	—

Also accepts every <div> prop.

* required. Every component also takes className.