State

Component

About

EmptyState A visually polished component used to indicate an empty or zero-data state in an application. It's designed to be highly reusable, accepting props for its content and icon. It includes a subtle floating animation to add a touch of dynamic elegance and is fully responsive and theme-adaptive using shadcn/ui variables.

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

Code

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

Usage.tsx

import { EmptyState } from "@/components/ui/state"; // Adjust the import path

/**
 * Demo component for showcasing the EmptyState component.
 */
const EmptyStateDemo = () => {
  return (
    <div className="flex h-screen w-full items-center justify-center rounded-lg border bg-background">
      <EmptyState
        // Replace with your actual image source link
        iconSrc="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-CK4odMSKWdmIj0ueBtNq9HOZR6Fbgv.png&w=1000&q=75"
        title="No activity yet"
        description="You'll receive notifications for important updates and whenever you're mentioned on FAPI."
        showBadge={true}
        badgeContent={10}
        // This class enables the floating animation defined in globals.css
        imageClassName="animate-float"
      />
    </div>
  );
};

export default EmptyStateDemo;