Components
<AccountsCard />
Displays and manages linked social accounts
Import
import { AccountsCard } from "@better-auth/ui-react/components";Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/accounts-card.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/accounts-card.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/accounts-card.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/accounts-card.jsonUsage
<AccountsCard />Props
| Name | Type | Default | Description |
|---|---|---|---|
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 |
Example
import { AccountsCard } from "@better-auth/ui-react/components";
export function AccountSettings() {
return (
<div className="space-y-4">
<AccountsCard />
</div>
);
}Features
- View all linked social accounts (Google, GitHub, Discord, etc.)
- Link new social accounts
- Unlink existing social accounts
- Shows provider icons and account information
- Built-in loading states
- Prevents unlinking if it's the only authentication method