Components
<UpdateUsernameCard />
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.
Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-username-card.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-username-card.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-username-card.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/update-username-card.jsonUsage
Include the <UpdateUsernameCard /> in your custom settings or profile page:
import { UpdateUsernameCard } from "@/components/settings/account/update-username-card";
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; ... 358 more ...; UNKNOWN: 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",
}}
/>