benflux/ui
Data Display

Empty State

A placeholder component to display when there is no content to show.

No messages

Your inbox is empty.

No results found

Try adjusting your search query.

Installation

npx benflux-ui add empty

Usage

import { Empty } from "@/components/ui/empty"
import { Inbox } from "lucide-react"
import { Button } from "@/components/ui/button"

<Empty
  icon={<Inbox />}
  title="No messages"
  description="Your inbox is empty. Start a conversation."
  action={<Button size="sm">Compose</Button>}
/>

// Sizes
<Empty size="sm" icon={<Search />} title="No results" />
<Empty size="lg" icon={<Users />} title="No team members" />