Better Auth UI

The <OrganizationsCard /> component displays a list of organizations the user belongs to and provides an interface for creating new ones.

Installation

pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/organizations-card.json

npx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/organizations-card.json

yarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/organizations-card.json

bun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/organizations-card.json

Usage

import { OrganizationsCard } from "@/components/organization/organizations-card";

export function DashboardPage() {
  return <OrganizationsCard />;
}

Features

Organization List: Shows all organizations the user is a member of
Create Organization: Integrated button to open the creation dialog
Active Status: Highlights the currently active organization
Quick Switch: Easy navigation to organization views

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

<OrganizationsCard />

With Redirection

<OrganizationsCard
  onOrganizationCreated={(org) => {
    router.push(`/org/${org.slug}`);
  }}
/>

Role Requirements

Users can view this card if they are authenticated.
Creating an organization typically requires general permissions defined in your better-auth configuration.

<OrganizationsCard />

On this page