Empty State

A placeholder UI for when a section has no content.

components/ui/blocks.tsxexportEmptyState

blockfeedback

Loading preview...

Installation

npx baseui-cn add empty-state

Usage

import { EmptyState, EmptyStateIcons } from "@/components/ui/blocks"
import { Button } from "@/components/ui/button"
;<EmptyState
  icon={EmptyStateIcons.folder}
  title="No projects yet"
  description="Create your first project to get started."
  action={<Button>Create project</Button>}
/>

Examples

With outline border

Use className="border border-dashed" for a dashed container style.

Loading preview...

API

EmptyState

The registry block lives in components/ui/blocks.tsx. The local composable Empty helpers are separate APIs.

Prop	Type	Default	Description
`title`	`string`	Required	Empty state heading.
`description`	`string`	—	Supporting guidance.
`icon`	`ReactNode`	—	Optional decorative media.
`action`	`ReactNode`	—	Compose approved Button actions.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Content spacing and type size.
`className`	`string`	—	Container customization.