Available nowReact

Team invite

A complete invitation panel with role selection, notifications, and sent state.

shadcnRegistry install command

npx shadcn add http://localhost:3000/r/menace-team-invite.json

Preview

Live component behavior

Interactive

Preview size

desktop

Choose access and send a test invitation.

Use it in context.

Copy the component into your project, then adapt the source to the interface around it.

TSXUsage example

import { MenaceTeamInvite } from "@/components/menace-team-invite";

export default function Component() {
  return <MenaceTeamInvite onInvite={async (invite) => saveInvite(invite)} />;
}

API and behavior

roleOptionsEditor, Viewer: Available role values, labels, and descriptions.
onInviteundefined: Async callback receiving email, role, and notification preference.
statusuncontrolled: Controlled idle, sending, sent, or error state.
notifyByEmailtrue: Controlled delivery preference.

Email, role, notifications, and submission status can each be controlled independently.
Async submission moves through sending, sent, and explicit error states.
Role selection uses native radio semantics and the email field keeps browser validation.