Blocks

Empty state

An empty view with a next step.

No projects yet

Create your first project.

Install

npx shadcn@latest add http://localhost:3000/r/empty-state.json

Dependencies: button

Usage

"use client"

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

export function ProjectsEmpty({ onCreate }: { onCreate: () => void }) {
  return (
    <EmptyState
      title="No projects yet"
      description="Create your first project."
      actionLabel="New project"
      onAction={onCreate}
    />
  )
}

API

Prop	Type	Notes
`title`	string · required	Empty state heading.
`description`	string · required	Supporting text.
`actionLabel`	string	Shows the action button.
`onAction`	() => void	Button callback.
`icon`	ReactNode	Optional icon.

Source code +

import * as React from "react"

import { Button } from "@/components/ui/button"

type EmptyStateProps = {
  title: string
  description: string
  actionLabel?: string
  onAction?: () => void
  icon?: React.ReactNode
}

export function EmptyState({ title, description, actionLabel, onAction, icon }: EmptyStateProps) {
  return (
    <div className="flex min-h-72 flex-col items-center justify-center rounded-xl border border-dashed p-8 text-center">
      {icon ? <div className="mb-4 text-muted-foreground">{icon}</div> : null}
      <h2 className="font-semibold">{title}</h2>
      <p className="mt-2 max-w-sm text-sm leading-6 text-muted-foreground">{description}</p>
      {actionLabel ? <Button className="mt-5" onClick={onAction}>{actionLabel}</Button> : null}
    </div>
  )
}

Registry JSON ↗