Team Invitation Accept

Auth16: Team Invitation Accept

Full-height invitation-acceptance screen: the inviter's avatar and a bolded team/inviter description sit above a disabled, pre-filled email field plus name and password inputs for setting up the account. A decline link sits below the card.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth16?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth16?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth16.tsx and the button, input, field, and avatar shadcn/ui primitives it's built on.

Quick start

The installed file exports auth16Demo alongside the block: the exact props behind the preview above. Spread it to get a working invitation screen in one line.

import { Auth16, auth16Demo } from "@/components/beste/block/auth16";

export default function InvitePage() {
  return <Auth16 {...auth16Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Auth16 } from "@/components/beste/block/auth16";

export default function InvitePage() {
  return (
    <Auth16
      invite={{
        teamName: "Northwind",
        inviterName: "Maria Santos",
        email: "newhire@northwind.com",
        avatar: { src: "https://example.com/maria.jpg", alt: "Maria Santos" },
      }}
      heading="Join the team"
      description="<strong>Maria Santos</strong> invited you to collaborate on <strong>Northwind</strong>."
      labels={{
        emailField: "Email",
        name: "Full name",
        namePlaceholder: "Jane Cooper",
        password: "Password",
        passwordPlaceholder: "Create a password",
        submit: "Accept invitation",
      }}
      declinePrompt={{ text: "Not interested?", linkLabel: "Decline invitation", href: "/decline" }}
    />
  );
}

Props

type Auth16Invite = {
  teamName: string;
  inviterName: string;
  email: string;
  avatar?: { src: string; alt: string };
};

type Auth16Labels = {
  emailField?: string;
  name?: string;
  namePlaceholder?: string;
  password?: string;
  passwordPlaceholder?: string;
  submit?: string;
  passwordToggle?: string;
};

Behavior notes

• description is injected via dangerouslySetInnerHTML with a [&>strong]:font-semibold [&>strong]:text-foreground selector, so callers bold the inviter and team names inline (the demo wraps both in <strong>) instead of the component exposing separate name-highlighting props.
• The email field is pre-filled from invite.email via defaultValue and rendered disabled, so it's shown for confirmation only and can't be edited; it renders at all only when both invite.email and labels.emailField are set.
• Only one password field exists. Even though this is an account-setup flow, there is no confirm-password field, so nothing in the component checks the password was typed correctly a second time.
• The password show/hide toggle follows the same local useState pattern as the other auth blocks, and the <form> only calls e.preventDefault() on submit with no wired acceptance handler.
• The AvatarFallback initials are derived from invite.inviterName, not the invitee's own name, since the invitee hasn't set one yet.