Better Auth UI

Beautiful organization switcher component for better-auth organization management.

The <OrganizationSwitcher /> allows users to quickly switch between their organizations, create new ones, and access organization 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 { OrganizationSwitcher } from "@/components/organization/organization-switcher";

export default function Nav() {
  return (
    <nav>
      <OrganizationSwitcher />
    </nav>
  );
}

Reference

Prop	Type	Default
`hidePersonal?`	`boolean`	`false`
`onSetActive?`	`((organization: any) => void)`	-
`slug?`	`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; }>`	-
`trigger?`	`any`	-
`sideOffset?`	`number`	-
`side?`	`"top" \| "right" \| "bottom" \| "left"`	-
`alignOffset?`	`number`	-
`align?`	`"center" \| "start" \| "end"`	-
`classNames?`	`OrganizationSwitcherClassNames`	-

Examples

Custom Button Size

<OrganizationSwitcher size="sm" />

With Custom Labels

<OrganizationSwitcher
  localization={{
    CREATE_ORGANIZATION: "New Team",
    PERSONAL_ACCOUNT: "My Workspace",
  }}
/>