Empty
What a place shows when it has nothing in it yet: a mark in a slanted black well, a leaning title, a line of explanation, and the action that fills it.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/emptyExamples
A district with no jobs
No jobs in this district
The dispatcher posts new jobs at the top of every hour.
import { Button } from "@/components/zero/button";import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle,} from "@/components/zero/empty";import { SearchIcon } from "@/components/zero/icons";export default function EmptyBoard() { return ( <Empty className="border-(length:--zero-stroke-thin) border-zero-line border-dashed"> <EmptyHeader> <EmptyMedia> <SearchIcon /> </EmptyMedia> <EmptyTitle>No jobs in this district</EmptyTitle> <EmptyDescription> The dispatcher posts new jobs at the top of every hour. </EmptyDescription> </EmptyHeader> <EmptyContent> <Button>Show every district</Button> <Button variant="ghost">Clear the filters</Button> </EmptyContent> </Empty> );}Behaviour
It centres itself in the room it is given. Give it a dashed outline with className when it stands for a drop zone or a slot.