Better Auth UI

Import

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

pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-field-card.json

npx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-field-card.json

yarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-field-card.json

bun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-field-card.json

<UpdateFieldCard
  name="phoneNumber"
  label="Phone Number"
  type="text"
  placeholder="Enter your phone number"
/>

Name	Type	Default	Description
`name`	`string`	(required)	Field name in the user object
`label`	`ReactNode`	`undefined`	Display label for the field
`type`	`"text" \| "number" \| "boolean"`	`"text"`	Input type for the field
`value`	`unknown`	`undefined`	Current field value
`placeholder`	`string`	`undefined`	Input placeholder text
`required`	`boolean`	`false`	Whether the field is required
`description`	`ReactNode`	`undefined`	Description text shown below the title
`instructions`	`ReactNode`	`undefined`	Additional instructions shown in the card
`validate`	`(value: string) => boolean \| Promise<boolean>`	`undefined`	Custom validation function
`className`	`string`	`undefined`	Additional CSS classes for styling
`classNames`	`SettingsCardClassNames`	`undefined`	Class names for individual card components
`localization`	`Partial<AuthLocalization>`	`undefined`	Localization object for translations

<UpdateFieldCard
  name="bio"
  label="Bio"
  type="text"
  placeholder="Tell us about yourself"
  description="A short description about you"
/>

<UpdateFieldCard
  name="age"
  label="Age"
  type="number"
  required
  validate={(value) => Number(value) >= 18}
/>

<UpdateFieldCard
  name="newsletter"
  label="Subscribe to newsletter"
  type="boolean"
  description="Receive updates about new features"
/>