Invite Modal

Component

About

A modal dialog for inviting a team member by email with a role selector and an animated sent-confirmation state.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import { InviteModal } from "@/components/ui/invite-modal";

export default function InviteModalDemo() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8">
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        Invite teammate
      </button>
      <InviteModal
        open={open}
        onOpenChange={setOpen}
        onSend={(email, role) => {
          console.log("Invite sent", email, role);
        }}
      />
    </div>
  );
}