Empty State
Empty content placeholder.
import { Inbox } from "lucide-react";import { Button } from "@/components/ui/button";import { EmptyState } from "@/registry/new-york/items/manpowerhub-empty-state/components/empty-state";export function ManpowerhubEmptyStateBasic() { return ( <div className="rounded-lg border border-border bg-card"> <EmptyState icon={<Inbox />} title="No deployments yet" description="Create your first deployment or let the AI Agent handle assignment." action={<Button size="sm">New deployment</Button>} /> </div> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/empty-state.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
export interface EmptyStateProps extends Omit< React.ComponentProps<"div">, "title"> { icon?: React.ReactNode; title: React.ReactNode; description?: React.ReactNode; action?: React.ReactNode;}
function EmptyState({ className, icon, title, description, action, ...props}: EmptyStateProps) { return ( <div data-slot="empty-state" className={cn("px-5 py-11 text-center", className)} {...props} > {icon ? ( <div className="mx-auto mb-3 text-[var(--surface-5)] [&_svg]:mx-auto [&_svg]:size-8"> {icon} </div> ) : null} <div className="mb-1 text-[13.5px] font-semibold text-foreground"> {title} </div> {description ? ( <p className="mx-auto mb-3.5 max-w-60 text-[12.5px] leading-normal text-[var(--text-3)]"> {description} </p> ) : null} {action} </div> );}
export { EmptyState };Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this empty state:
npx shadcn@latest add @woxcn/manpowerhub-empty-state