Better Auth UI

The <UpdateUsernameCard /> component provides a simple, intuitive UI that enables users to update their account username within the authentication system. This component automatically integrates with the AuthUIProvider context, leveraging the username configuration set by your authentication framework.

Usage

Include the <UpdateUsernameCard /> in your custom settings or profile page:

import { UpdateUsernameCard } from "@daveyplate/better-auth-ui"

export default function CustomSettings() {
    return (
        <div className="flex flex-col gap-6">
            <UpdateUsernameCard />
        </div>
    )
}

Reference

These are the available props for <UpdateUsernameCard />:

Prop	Type	Default
`action?`	`(() => unknown)`	-
`localization?`	`Partial<{ INVALID_USERNAME_OR_PASSWORD: string; EMAIL_NOT_VERIFIED: string; UNEXPECTED_ERROR: string; USERNAME_IS_ALREADY_TAKEN: string; USERNAME_TOO_SHORT: string; USERNAME_TOO_LONG: string; ... 355 more ...; SLUG_DOES_NOT_MATCH: string; }>`	-
`variant?`	`"default" \| "destructive"`	-
`optimistic?`	`boolean`	-
`isPending?`	`boolean`	-
`disabled?`	`boolean`	-
`isSubmitting?`	`boolean`	-
`actionLabel?`	`any`	-
`instructions?`	`any`	-
`description?`	`any`	-
`title?`	`any`	-
`classNames?`	`SettingsCardClassNames`	-
`className?`	`string`	-
`children?`	`any`	-

Styling

The styles can be customized precisely with Tailwind classes via the classNames prop:

<UpdateUsernameCard
    classNames={{
        base: "border-blue-500",
        header: "bg-blue-50",
        title: "text-blue-500",
        description: "text-muted-foreground",
        content: "bg-blue-50",
        footer: "bg-blue-50",
        input: "bg-background border-blue-500 placeholder:text-muted",
    }}
/>

<UpdateUsernameCard />

Usage

Reference

Styling

On this page