Skip to main content

Invite members

Account and Settings

How do more people get in, and what happens when they follow the link?

Both ends of an invitation. InviteMembers turns typed or pasted addresses into chips (Enter, comma, space, Backspace removes), keeps an address that is not an email but flags it and never sends it, puts a role Select on every chip, copies a share link in one click and lists pending invites with resend and a revoke that asks first. AcceptInvite is the page behind the link: workspace, inviter, role, “Join as <email>”, “Not you? Switch account”, decline, and plain words when the link expired or you are already a member.

Open in StorybookSource
npx shadcn@latest add https://elabs-ai.com/r/invite-members-01.json

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui registry block "Invite members" (invite-members-01) to this project. A block is copied into the app and becomes my code.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Find it and what it is built from: `npx -y @elabs-ai/components-cli search invite-members-01`.
3. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), plus the packages the block imports. If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Copy the block in with `npx shadcn@latest add https://elabs-ai.com/r/invite-members-01.json`; if that url does not answer, copy its files from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks/invite-members-01 instead. Then adapt it here: [the screen or file, and the real data it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Dependencies

  • @elabs-ai/components-tokens
  • @elabs-ai/components-ui
  • lucide-react

Examples

6 live examples

Composes And Sends

Addresses become chips on comma, space or Enter and are lower-cased; one that is not an email is flagged and not counted; a role is picked on the chip; Send moves the rest to pending.

Nothing Pending

Nothing outstanding: the pending list says so instead of showing an empty box.

Accept Invite

The page behind the link: workspace, inviter, role, and “Join as …” naming the account.

Accept Invite Expired

The link is older than seven days: no join button, just the way to get a new one.

Accept Invite Already Member

The signed-in account is already a member: nothing to accept, open the workspace.