Components
<OrganizationInvitationsCard />
The <OrganizationInvitationsCard /> component allows organization administrators to manage invitations sent from their organization.
Installation
pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/organization-invitations-card.jsonnpx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/organization-invitations-card.jsonyarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/organization-invitations-card.jsonbun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/organization-invitations-card.jsonUsage
import { OrganizationInvitationsCard } from "@/components/organization/organization-invitations-card";
export function OrgSettingsPage({ orgId }: { orgId: string }) {
return <OrganizationInvitationsCard organizationId={orgId} />;
}Features
- Sent Invitations: View all pending invitations sent by the organization
- Cancel Invitation: Revoke sent invitations
- Invite Member: Integrated action to send new invitations (opens dialog)
- Role-Based: Typically visible only to Admins and Owners
Reference
| Prop | Type | Default |
|---|---|---|
slug? | string | - |
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
<OrganizationInvitationsCard organizationId="org_123" />