Better Auth UI

A complete organization management dashboard, including members, invitations, and settings.

The <OrganizationView /> component is a high-level component that displays a comprehensive view of an organization, typically including its members, invitations, and settings.

Installation

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

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

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

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

Usage

import { OrganizationView } from "@/components/organization/organization-view";

export function OrganizationPage({ slug }: { slug: string }) {
  return <OrganizationView slug={slug} />;
}

Features

Member List: Displays and manages organization members
Invitations: Manages pending organization invitations
Settings: Integrated access to organization settings
Role Management: Update member roles and permissions
Responsive Layout: Optimized for both mobile and desktop views

Reference

Prop	Type	Default
`view?`	`"SETTINGS" \| "MEMBERS" \| "API_KEYS"`	-
`slug?`	`string`	-
`hideNav?`	`boolean`	-
`pathname?`	`string`	-
`path?`	`string`	-
`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; }>`	-
`classNames?`	`{ base?: string \| undefined; cards?: string \| undefined; drawer?: { menuItem?: string \| undefined; } \| undefined; sidebar?: { base?: string \| undefined; button?: string \| undefined; buttonActive?: string \| undefined; } \| undefined; card?: SettingsCardClassNames \| undefined; }`	-
`className?`	`string`	-

Examples

Basic Usage

<OrganizationView slug="my-organization" />

With Custom Class Names

<OrganizationView
  slug="my-organization"
  classNames={{
    base: "max-w-4xl mx-auto",
    content: "p-6",
  }}
/>

Internal Components

The <OrganizationView /> is composed of several specialized cards:

OrganizationMembersCard: Manages the list of members.
OrganizationInvitationsCard: Manages pending invitations.
OrganizationSettingsCards: Provides the settings management interface.

Requirements

The organization plugin must be enabled in your AuthUIProvider:

providers.tsx

<AuthUIProvider
  authClient={authClient}
  organization={{
    enabled: true,
  }}
>
  {children}
</AuthUIProvider>

<OrganizationView />

On this page