Serafim

Empty State

Buttons 774

About

Empty state card with shadcn/ui buttons. Inspired by @AndyRyanWeir

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Empty State to your project and fits it to your theme.

Code

How Empty State is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { EmptyState } from "@/components/ui/empty-state"
import { 
  FileText, 
  Link, 
  Files, 
  Search, 
  MessageSquare, 
  Mail, 
  Image,
  FileQuestion,
  Settings
} from "lucide-react"

function EmptyStateDefault() {
  return (
    <EmptyState
      title="No Forms Created"
      description="You can create a new template to add in your pages."
      icons={[FileText, Link, Files]}
      action={{
        label: "Create Form",
        onClick: () => console.log("Create form clicked")
      }}
    />
  )
}

function EmptyStateMessages() {
  return (
    <EmptyState
      title="No Messages"
      description="Start a conversation by sending a message."
      icons={[MessageSquare, Mail]}
      action={{
        label: "Send Message",
        onClick: () => console.log("Send message clicked")
      }}
    />
  )
}

function EmptyStateSearch() {
  return (
    <EmptyState
      title="No Results Found"
      description="Try adjusting your search filters."
      icons={[Search, FileQuestion]}
    />
  )
}

function EmptyStateMedia() {
  return (
    <EmptyState
      title="No Images"
      description="Upload images to get started with your gallery."
      icons={[Image]}
      action={{
        label: "Upload Images",
        onClick: () => console.log("Upload clicked")
      }}
    />
  )
}

function EmptyStateSettings() {
  return (
    <EmptyState
      title="No Settings"
      description="Configure your application settings to get started."
      icons={[Settings]}
      action={{
        label: "Configure",
        onClick: () => console.log("Configure clicked")
      }}
    />
  )
}

export {
  EmptyStateDefault,
  EmptyStateMessages,
  EmptyStateSearch,
  EmptyStateMedia,
  EmptyStateSettings,
}

Dependencies

More by Serafim

View all
  • Spline Scene

    Spline Scene

    9.4K
  • Testimonials with Marquee

    Testimonials with Marquee

    2.3K
  • Gradient Button

    Gradient Button

    1.9K
  • Pixel Canvas

    Pixel Canvas

    899
  • Animated Blur Number

    Animated Blur Number

    830
  • Balloons

    Balloons

    755
  • Status Badge

    Status Badge

    642
  • Hover Button

    Hover Button

    561

More in Buttons

View all
  • Button

    Button

    5
  • App Store Button

    App Store Button

    453
  • Button

    Button

    47
  • Eclipse Button

    Eclipse Button

    39
  • Texture Button

    Texture Button

    92
  • Button

    Button

    4
  • Split Button

    Split Button

    14
  • Button

    Button

    32