EmptyState

emptystate-1779394345601.tsx

'use client'
export default function EmptyState({
  icon = '🔍',
  title = 'No results found',
  desc = 'Try adjusting your search or filters to find what you are looking for.',
  actionLabel = 'Clear Filters',
  onAction,
  type = 'search',
}) {
  const TYPES = {
    search: { icon:'🔍', bg:'#f0f4ff' },
    empty: { icon:'📭', bg:'#f8fafc' },
    error: { icon:'⚠️', bg:'#fff5f5' },
    success: { icon:'✅', bg:'#f0fdf4' },
  }
  const t = TYPES[type] || TYPES.search
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', padding:'48px 24px', textAlign:'center' }}>
      <div style={{
        width:'96px', height:'96px', borderRadius:'24px', background:t.bg,
        display:'flex', alignItems:'center', justifyContent:'center',
        fontSize:'44px', marginBottom:'20px',
        boxShadow:'0 4px 20px rgba(0,0,0,0.06)',
      }}>{icon || t.icon}</div>
      <h3 style={{ margin:'0 0 8px', fontSize:'18px', fontWeight:700, color:'#1e293b' }}>{title}</h3>
      <p style={{ margin:'0 0 24px', fontSize:'14px', color:'#64748b', lineHeight:1.6, maxWidth:'280px' }}>{desc}</p>
      {actionLabel && (
        <button onClick={onAction} style={{
          background:'linear-gradient(135deg,#6d28d9,#2563eb)', color:'#fff',
          border:'none', borderRadius:'10px', padding:'10px 24px',
          cursor:'pointer', fontWeight:600, fontSize:'14px',
        }}>{actionLabel}</button>
      )}
    </div>
  )
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Empty state illustration with action button and description

More from Utility

'use client'
import { useState, useCallback } from 'react'

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

'use client'
import { useState } from 'react'

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

'use client';
import { useState } from 'react';

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility

'use client'
import { useState } from 'react'

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility