<OrganizationSettingsCards />

The <OrganizationSettingsCards /> component provides a comprehensive set of cards for managing organization settings, including organization details, logo, and deletion options.

Usage

import { OrganizationSettingsCards } from '@daveyplate/better-auth-ui'

export function OrganizationSettingsPage() {
  return (
    <OrganizationSettingsCards />
  )
}

Features

Organization Logo: Upload and manage organization logo
Organization Name: Update organization name
Organization Slug: Update organization slug/identifier
Delete Organization: Delete the organization (owner only)

Reference

Prop	Type	Default
`slug?`	`string`	-
`localization?`	`Partial<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; }>>`	-
`classNames?`	`{ card?: SettingsCardClassNames \| undefined; cards?: string \| undefined; }`	-
`className?`	`string`	-

Examples

Basic Usage

<OrganizationSettingsCards />

With Custom Class Names

<OrganizationSettingsCards 
  classNames={{
    cards: "gap-8",
    card: {
      base: "shadow-lg",
      title: "text-2xl",
      button: "rounded-full"
    }
  }}
/>

With Custom Localization

<OrganizationSettingsCards 
  localization={{
    ORGANIZATION_NAME: "Team Name",
    ORGANIZATION_SLUG: "Team URL",
    DELETE_ORGANIZATION: "Delete Team"
  }}
/>

Included Cards

Organization Logo Card

Upload custom organization logo
Delete existing logo
Automatic image resizing and cropping
Support for custom upload functions

Organization Name Card

Update organization display name
Real-time validation
Permission-based access control

Organization Slug Card

Update organization URL identifier
Slug format validation (lowercase, hyphens)
Uniqueness checking

Delete Organization Card

Owner-only access
Confirmation dialog
Automatic cleanup of related data

Requirements

The organization plugin must be enabled with proper configuration:

providers.tsx

<AuthUIProvider
  authClient={authClient}
  organization={{
    logo: {
      upload: async (file) => {
        // Your upload logic
        return uploadedUrl
      },
      delete: async (url) => {
        // Optional: clean up your storage/CDN on delete
        await myCdn.delete(url)
      },
      size: 256,
      extension: "png"
    }
  }}
>
  {children}
</AuthUIProvider>

Permissions

View Settings: All organization members
Update Name/Slug: Admin and Owner roles
Upload Logo: Admin and Owner roles
Delete Organization: Owner role only

<OrganizationSettingsCards />

On this page