# Empty State 02 - Invite Your Team
> A centered empty state with a custom illustration, heading, description, and two calls-to-action for inviting teammates or copying a shareable invite link, complete with an animated copy confirmation.
A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/empty-state-02).
- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/empty-state-02
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/empty-state-02-light-ebee6020440f9074.png
- Registry item: https://shadcnspace.com/r/empty-state-02.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://shadcnspace.com/r/empty-state-02.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- npm packages: `lucide-react`, `motion`
- Registry items: `button`, `empty`
## Files
### `src/components/shadcn-space/blocks/empty-state-02/page.tsx`
```tsx
import EmptyState from "@/components/shadcn-space/blocks/empty-state-02/empty-state";
const Page = () => {
return ;
};
export default Page;
```
### `src/components/shadcn-space/blocks/empty-state-02/empty-state.tsx`
```tsx
"use client";
import { useRef, useState } from "react";
import type { ReactNode } from "react";
import {
AnimatePresence,
motion,
useInView,
type Variants,
} from "motion/react";
import { Button } from "@/components/ui/button";
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";
import { cn } from "@/lib/utils";
import { Check, Copy, Plus } from "lucide-react";
const COPIED_RESET_MS = 1800;
interface EmptyStateAction {
label: string;
icon?: ReactNode;
onClick?: () => void;
}
interface EmptyStateProps {
title?: string;
description?: string;
inviteLink?: string;
primaryAction?: EmptyStateAction;
secondaryAction?: EmptyStateAction;
}
const EASE = [0.16, 1, 0.3, 1] as const;
const containerVariants: Variants = {
hidden: {},
show: {
transition: {
staggerChildren: 0.1,
delayChildren: 0.05,
},
},
};
const itemVariants: Variants = {
hidden: { opacity: 0, y: 12 },
show: {
opacity: 1,
y: 0,
transition: { duration: 0.5, ease: EASE },
},
};
const EmptyStateIllustration = () => (
);
const EmptyState = ({
title = "Bring your team on board",
description = "Invite owners, editors, and reviewers by email or share a secure link collaboration starts the moment they join.",
inviteLink = "https://app.shadcnspace.com/invite/2f9a7c1e",
primaryAction = {
label: "Invite member",
icon: ,
},
secondaryAction = {
label: "Copy invite link",
icon: ,
},
}: EmptyStateProps) => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
const [copied, setCopied] = useState(false);
const handleCopyClick = async () => {
try {
await navigator.clipboard.writeText(inviteLink);
setCopied(true);
window.setTimeout(() => setCopied(false), COPIED_RESET_MS);
} catch {
// Clipboard access denied or unavailable — no feedback shown.
}
secondaryAction?.onClick?.();
};
return (
{title}
{description}
{primaryAction && (
)}
{secondaryAction && (
)}
);
};
export default EmptyState;
```