Invite Team Dialog

Component 7

About

A modal dialog with an icon header and email field for inviting teammates to join a workspace.

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

Code

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

Usage.tsx

import { UsersIcon } from "lucide-react";

import { Button } from "@/components/ui/dialog-16-utils/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog-16-utils/dialog";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/dialog-16-utils/field";
import { Input } from "@/components/ui/dialog-16-utils/input";

export default function Default() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center p-6">
      <Dialog defaultOpen>
        <DialogTrigger
          render={<Button variant="outline">Invite team</Button>}
        />
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <div className="flex flex-col gap-3">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-full">
                <UsersIcon className="size-5" />
              </div>
              <div className="flex flex-col gap-2">
                <DialogTitle>Invite your team</DialogTitle>
                <DialogDescription>
                  Add colleagues by email. They will join as editors on this
                  workspace.
                </DialogDescription>
              </div>
            </div>
          </DialogHeader>
          <Field>
            <FieldLabel htmlFor="dialog-16-email">Email address</FieldLabel>
            <Input
              id="dialog-16-email"
              type="email"
              placeholder="colleague@company.com"
            />
            <FieldDescription>
              Separate multiple addresses with commas.
            </FieldDescription>
          </Field>
          <DialogFooter>
            <DialogClose render={<Button variant="outline">Cancel</Button>} />
            <Button>Send invites</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}