BETTER-AUTH. UI
Components

<UpdateNameCard />

Settings card for updating user's display name

Import

import { UpdateNameCard } from "@better-auth/ui-react/components";

Installation

pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-name-card.json
npx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-name-card.json
yarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-name-card.json
bun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-name-card.json

Usage

<UpdateNameCard />

Props

NameTypeDefaultDescription
classNamestringundefinedAdditional CSS classes for styling
localizationAuthLocalizationundefinedLocalization object for translations

Example

import { UpdateNameCard } from "@better-auth/ui-react/components";

export function AccountSettings() {
  return (
    <div className="space-y-4">
      <UpdateNameCard />
    </div>
  );
}

Features

  • Update user's display name
  • Built-in form validation
  • Success/error feedback
  • Loading states during update
  • Integrated with Better Auth session management

<UpdateUsernameCard />

Previous Page

<UpdateFieldCard />

Generic settings card for updating custom user fields