Better Auth UI

Import

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

Usage

<AccountSettingsCards />

Props

Name	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes for the container
`classNames`	`SettingsCardsClassNames`	`undefined`	Class names for individual components
`localization`	`Partial<AuthLocalization>`	`undefined`	Localization object for translations

Example

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

export function AccountSettings() {
    return (
        <div className="container mx-auto p-6">
            <h1 className="text-2xl font-bold mb-6">Account Settings</h1>
            <AccountSettingsCards />
        </div>
    )
}

Custom Styling

<AccountSettingsCards
    className="space-y-8"
    classNames={{
        cards: "gap-6",
        card: {
            base: "border-2",
            header: "bg-gray-50"
        }
    }}
/>

Features

The AccountSettingsCards component automatically renders relevant account management cards based on your Better Auth configuration:

Included Cards

Update Avatar Card - If avatar support is enabled
Update Username Card - If username credentials are enabled
Update Name Card - If name field is included in settings
Change Email Card - If email changes are enabled
Custom Fields - Any additional fields configured in your auth setup
Accounts Card - If multi-session support is enabled

Conditional Rendering

Cards are conditionally rendered based on your Better Auth configuration. For example:

Avatar card only appears if avatar is configured
Username card only appears if credentials.username is enabled
Custom fields are rendered dynamically based on additionalFields

Localization

The component supports full localization through the localization prop:

<AccountSettingsCards
    localization={{
        accountSettings: {
            title: "Paramètres du compte",
            updateAvatar: "Mettre à jour l'avatar",
            updateName: "Mettre à jour le nom"
            // ... other translations
        }
    }}
/>

<SettingsCards /> - Parent component with navigation
<UpdateAvatarCard /> - Individual avatar update card
<UpdateNameCard /> - Individual name update card
<AccountsCard /> - Linked accounts management

<AccountSettingsCards />

On this page