Empty State

Dashed empty state panel with an icon slot, title, description and an optional call to action button. Use it for first run screens and empty lists in React.

src/registry/ui/empty-state.tsx/r/empty-state.json

No projects

Create your first project to get started.

Default

Installation#

bash

npx shadcn@latest add @minidev/empty-state

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/empty-state.json

Usage#

tsx

import { EmptyState } from "@/components/ui/empty-state"

export function Example() {
  return (
    <EmptyState className="max-w-sm" title="No projects" description="Create a project to begin." actionLabel="New project" />
  )
}

API reference#

EmptyState props
Prop	Type	Default
`title*`	`string`	`-`
`description`	`string`	`-`
`actionLabel`	`string`	`-`
`onAction`	`() => void`	`-`
`icon`	`React.ReactNode`	`-`
`className`	`string`	`-`

* required

Dependencies#

npm

React only

Built from

Examples#

FeedbackToasts, empty, errors

BadgeShadcn style badge in seven variants: default, accent, secondary, destructive, outline, ghost and link. Renders as a span or any element, with icon support.BannerInline notice banner in accent, warning or danger tones, with a status role, a slot for an action button and an optional dismiss icon on the right.CalloutTailwind callout box in info, success, warning or danger tones with an optional bold title. Uses the note role, which suits docs, forms and setup steps.Empty SearchNo results state for search that echoes the query in the title and suggests trying another query or clearing filters. Built on the empty state component.Error StateReact error state panel with an alert role, a title, explanation and an optional Try again button that calls your retry handler. For failed fetches.Health IndicatorA status dot and label for service health with operational, degraded and down states mapped to success, warning and danger colors. Made for status pages.

All alerts, toasts and empty states

Learn more

Build a SaaS dashboard in Next.js with free componentsGuide Empty states, loading skeletons and error states in ReactGuide What is Empty state?Glossary All empty and error states9 blocks