Create account

Pro

Create your company's account. You become its owner; what that means is the app's to say (ownerNote), before you commit. One person belongs to one account, so if invites are waiting for you, creating an account supersedes them — that's said here, before it happens.

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/account-create

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

Usage

TSX · The example above

"use client"

import * as React from "react"
import { AccountCreate } from "@/components/account-create"

export default function Example() {
  const [busy, setBusy] = React.useState(false)
  return (
    <AccountCreate
      email="priya@acme.example"
      verified
      pendingInvites={1}
      ownerNote="Admin on every environment, and the only person who can remove members."
      busy={busy}
      onCreate={async () => {
        setBusy(true)
        await new Promise((r) => setTimeout(r, 600))
        setBusy(false)
      }}
      onSeeInvites={() => {}}
    />
  )
}

<AccountCreate>

Prop	Type	Default	Description
emailrequired	`string`	—	The signed-in person's email, shown at the top.
verifiedrequired	`boolean`	—	Whether that email is verified; until it is, Create is locked with the reason.
pendingInvites	`number \| undefined`	0	How many invites are waiting for this person; above 0, says creating an account supersedes them. Defaults to 0.
ownerNote	`React.ReactNode \| undefined`	—	What being the owner means here, e.g. "Admin everywhere; ownership can’t be handed over yet."
onCreaterequired	`(name: string) => void`	—	Called on submit with the trimmed company name.
onSeeInvites	`(() => void) \| undefined`	—	Shows a link to the waiting invites; called when it's clicked.
busy	`boolean \| undefined`	false	Disables Create while the account is being made.
error	`string \| undefined`	—	Shown under the name field, e.g. when the name is taken.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

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

Key	English
heading	Create your company’s account
verified	verified
notVerified	not verified
verifyFirst	Verify your email first; accounts are tied to a verified address.
nameIt	Give the account a name.
companyName	Company name
placeholder	Your company
owner	owner
youllBeOwner	You’ll be the {owner}: {note}
invitesWaiting	{ one: "An invite is waiting for you. You can belong to one account, so creating this one supersedes it.", other: "{count} invites are waiting for you. You can belong to one account, so creating this one supersedes them.", }
seeInvites	{ one: "See the invite", other: "See invites" }
create	Create account