Better Auth UI

The <ProvidersCard /> component provides a simple interface for managing linked social providers. It allows users to link or unlink third-party social accounts with a clean, customizable UI out of the box.

Usage

Here's how you can include <ProvidersCard /> on your user settings or account management page:

import { ProvidersCard } from "@daveyplate/better-auth-ui"
 
export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6">
            <ProvidersCard />
        </div>
    )
}

This component seamlessly pulls in settings from your AuthUIProvider context, automatically handling provider link and unlink workflows.

Reference

You can use the following props to further customize <ProvidersCard />:

Prop	Type	Default
`className?`	`string`	-
`classNames?`	`SettingsCardClassNames`	-
`accounts?`	`{ provider: string; }[]`	-
`isPending?`	`boolean`	-
`localization?`	`AuthLocalization`	`authLocalization`
`skipHook?`	`boolean`	-
`refetch?`	`() => void`	-

Styling

Customize the styling of your <ProvidersCard /> through the classNames prop:

<ProvidersCard
    classNames={{
        base: "border-primary shadow",
        header: "bg-primary-foreground",
        title: "text-xl font-semibold text-primary",
        description: "text-muted-foreground",
        content: "bg-background",
        footer: "bg-muted",
        button: "bg-primary hover:bg-primary-foreground text-white"
    }}
/>

Localization

Adjust displayed texts via the localization prop to fit your application's localization:

<ProvidersCard
    localization={{
        providers: "Social Accounts",
        providersDescription: "Link or unlink your third-party social accounts.",
        link: "Link Account",
        unlink: "Unlink",
        providerLinkSuccess: "Provider linked successfully!",
        providerUnlinkSuccess: "Provider unlinked successfully!",
    }}
/>

Usage in Settings Page

You usually integrate the <ProvidersCard /> with other settings components. Here's a typical example configuration:

app/dashboard/settings/page.tsx

import {
    ProvidersCard,  
    ChangeEmailCard,
    SettingsCards,
} from "@daveyplate/better-auth-ui";
 
export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6 mx-auto max-w-xl">
            <UpdateAvatarCard />
            <UpdateUsernameCard />
            <ChangeEmailCard />
            <ChangePasswordCard />
            <ProvidersCard />
            <SessionsCard />
            <DeleteAccountCard />
        </div>
    )
}

This complete implementation shows how you can use <ProvidersCard /> along with other available settings cards to build a comprehensive, managed user settings experience quickly.

<ProvidersCard />

Usage

Reference

Styling

Localization

Usage in Settings Page

On this page