Empty states explain what goes here and how to add it

An empty list view that shows only "No results" or a bare table with headers gives users no signal about what the space is for or how to fill it. The user-experience taxon treats empty states as prime teaching surface: they are the first thing new users see on every major view, and a generic empty state wastes that surface entirely. A good empty state names what belongs there, explains why it matters, and provides a direct action to create the first item — which is often the fastest path from signup to activation.

Build a single reusable empty-state component and use it everywhere a list, gallery, table, or dashboard renders with zero items. Create src/components/EmptyState.tsx accepting a title, description, and CTA, then swap in calls at every list view.

export function EmptyState({ title, description, actionLabel, actionHref }: Props) {
  return (
    <div className="text-center py-12">
      <h3 className="font-semibold">{title}</h3>
      <p className="text-muted-foreground mt-1">{description}</p>
      <Button className="mt-4" asChild><Link href={actionHref}>{actionLabel}</Link></Button>
    </div>
  );
}