UIPackage
Vue React

Empty State

React feedback
Edit on GitHub

Centered placeholder with icon, headline, supporting text, and one or two actions. Drop into empty lists, blank dashboards, and unauthenticated views — the standard "nothing here yet" pattern.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/empty-state.json

Or with the named registry: npx shadcn@latest add @uipkge-react/empty-state

Examples

Props

Name Type / Values Default Required
icon

Lucide icon component rendered above the title.

 LucideIcon — optional
title string — optional
description string — optional
role 'status' | 'alert' status optional
headingTag 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' — optional

Dependencies

lucide-react

Files (2)

  • components/ui/empty-state/empty-state.tsx 1.1 kB 
    import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Lucide icon component rendered above the title. */
  icon?: LucideIcon
  title?: string
  description?: string
  role?: 'status' | 'alert'
  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}

const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
  ({ className, icon: Icon, title, description, role = 'status', headingTag: Heading = 'h3', children, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('flex flex-col items-center py-12 text-center', className)}
      role={role}
      aria-live="polite"
      {...props}
    >
      {Icon ? <Icon className="text-muted-foreground mx-auto mb-3 size-10" aria-hidden="true" /> : null}
      {title ? <Heading className="text-foreground font-medium">{title}</Heading> : null}
      {description ? <p className="text-muted-foreground mt-1 max-w-sm text-sm">{description}</p> : null}
      {children}
    </div>
  ),
)
EmptyState.displayName = 'EmptyState'

export { EmptyState }
  • components/ui/empty-state/index.ts 0.1 kB 
    export { EmptyState, type EmptyStateProps } from './empty-state'

Raw manifest: https://react.uipkge.dev/r/react/empty-state.json