Components
<PasskeysCard />
Displays and manages user's passkeys/WebAuthn credentials
Import
import { PasskeysCard } from "@better-auth/ui-react/components";Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/passkeys-card.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/passkeys-card.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/passkeys-card.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/passkeys-card.jsonUsage
<PasskeysCard />Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes for styling |
localization | AuthLocalization | undefined | Localization object for translations |
Example
import { PasskeysCard } from "@better-auth/ui-react/components";
export function SecuritySettings() {
return (
<div className="space-y-4">
<PasskeysCard />
</div>
);
}Features
- View all registered passkeys
- Add new passkeys
- Delete existing passkeys
- Shows passkey creation date and device info
- Built-in loading states