Status Toast
Inline notification toast.
import { AlertTriangle, CheckCircle2 } from "lucide-react";import { StatusToast } from "@/registry/new-york/items/manpowerhub-status-toast/components/status-toast";export function ManpowerhubStatusToastBasic() { return ( <div className="flex flex-col gap-2 p-4"> <StatusToast variant="success" icon={<CheckCircle2 />} title="Payroll Processed" description="$284,000 · 2,847 workers · 0 errors" /> <StatusToast variant="warning" icon={<AlertTriangle />} title="Visa Expiry Alert" description="3 workers expiring within 30 days" /> </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/status-toast.tsx
import * as React from "react";import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const statusToastVariants = cva( "inline-flex max-w-[310px] min-w-60 items-start gap-2.5 rounded-[var(--r-md)] border border-[var(--color-border-strong)] border-l-[3px] bg-[var(--surface-2)] px-3.25 py-2.75 shadow-[var(--shadow-lg)] [&_svg]:mt-0.5 [&_svg]:size-[15px] [&_svg]:shrink-0", { variants: { variant: { success: "border-l-[var(--green)] [&_svg]:text-[var(--green)]", warning: "border-l-[var(--amber)] [&_svg]:text-[var(--amber)]", error: "border-l-[var(--red)] [&_svg]:text-[var(--red)]", info: "border-l-[var(--brand)] [&_svg]:text-[var(--brand)]", }, }, defaultVariants: { variant: "info" }, },);
export interface StatusToastProps extends Omit<React.ComponentProps<"div">, "title">, VariantProps<typeof statusToastVariants> { icon?: React.ReactNode; title: React.ReactNode; description?: React.ReactNode;}
function StatusToast({ className, variant, icon, title, description, ...props}: StatusToastProps) { return ( <div data-slot="status-toast" className={cn(statusToastVariants({ variant }), className)} {...props} > {icon} <div className="min-w-0"> <strong className="mb-0.5 block text-[12.5px] font-semibold text-foreground"> {title} </strong> {description ? ( <span className="text-[11.5px] text-[var(--text-3)]"> {description} </span> ) : null} </div> </div> );}
export { StatusToast, statusToastVariants };Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this status toast:
npx shadcn@latest add @woxcn/manpowerhub-status-toast