Components
<UserInvitationsCard />
The <UserInvitationsCard /> component allows users to view and manage invitations they have received from various organizations.
Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/user-invitations-card.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/user-invitations-card.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/user-invitations-card.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/user-invitations-card.jsonUsage
import { UserInvitationsCard } from "@/components/organization/user-invitations-card";
export function InvitationsPage() {
return <UserInvitationsCard />;
}Features
- Invitations List: Shows all pending invitations for the current user
- Accept/Decline: Integrated actions to respond to invitations
- Auto-Refresh: Updates automatically upon action completion
Reference
| 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 | - |
Examples
Basic Usage
<UserInvitationsCard />With Custom Localization
<UserInvitationsCard
localization={{
INVITATIONS: "Pending Invites",
ACCEPT: "Join",
DECLINE: "Ignore",
}}
/>