Invite members

Pro

Invite people by pasting any list of emails. Each address becomes a chip; ones that aren't valid, or already belong to members, are marked and left out. The invite grants one role (the app's choice, e.g. its lowest) on the environments ticked; rule says anything else the app enforces.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/invite-members

Brings in: button, environment-band, locale, locked, team, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { InviteMembers } from "@/components/invite-members"
import type { Environment } from "@/lib/team"

const environments: Environment[] = [
  { id: "env-staging", name: "Acme API", detail: "Staging", production: false, hue: 2, connection: "connected" },
  { id: "env-qa", name: "Acme API", detail: "QA", production: false, hue: 5, connection: "connected" },
]

export default function Example() {
  return (
    <InviteMembers
      className="w-full max-w-2xl"
      environments={environments}
      grants="Contributor"
      rule="An Admin can raise roles once they’ve joined."
      footnote="Invites expire in 7 days. People join by signing in with the invited email."
      existing={["priya@acme.example", "dana@acme.example"]}
      onInvite={() => {}}
    />
  )
}

<InviteMembers>

Prop	Type	Default	Description
environmentsrequired	`Environment[]`	—	Environments the inviter may invite to.
grantsrequired	`string`	—	The role label the invite grants, e.g. "Editor".
rule	`string \| undefined`	—	The app's rule, e.g. "An Admin can raise roles once they’ve joined."
footnote	`string \| undefined`	—	How invites work, from the app, e.g. "Invites expire in 7 days."
existing	`string[] \| undefined`	[]	Emails already in the account.
onInviterequired	`(emails: string[], environmentIds: string[]) => void`	—	Called on send with the valid new emails and the ticked environment ids.
busy	`boolean \| undefined`	false	Disables Send while the invites are going out.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under inviteMembers in <LocaleProvider strings={{ … }}>; the table is exported as inviteMembersStrings.

Key	English
label	Invite members
emails	Emails
placeholder	Paste emails, separated by commas, spaces or lines
notValid	Not a valid email
alreadyMember	Already a member
notValidNote	(not valid)
alreadyMemberNote	(already a member)
remove	Remove {email}
wontBeSent	{ one: "{count} won’t be sent: it’s invalid or already members.", other: "{count} won’t be sent: they’re invalid or already members.", }
grantsOn	{role} on
production	Production
addEmail	Add at least one new, valid email.
chooseWhere	Choose where they get access.
send	{ zero: "Send invite", one: "Send invite", other: "Invite {count} people" }