ShadCN Compatible Component Library Addition

.gitignore

@@ -135,3 +135,6 @@ dist
 
 # Webstorm project files
 .idea
+
+public/r
+registry/

.husky/pre-commit

@@ -0,0 +1,14 @@
+# 1. Generate the registry
+pnpm registry:generate
+
+# 2. Copy registry.json to root
+pnpm copy-registry
+
+# 3. Build the registry
+pnpm registry:build
+
+# 4. Delete docs/public/r
+pnpm delete-docs-r
+
+# 5. Copy public/r to docs/public/r
+pnpm copy-public-to-docs

docs/content/docs/components/accept-invitation-card.mdx

@@ -4,6 +4,31 @@ title: <AcceptInvitationCard />
 
 The `<AcceptInvitationCard />` component handles the organization invitation acceptance flow. It displays invitation details and allows users to accept or reject organization invitations.
 
+## Installation
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">
+  ```shell
+  npx shadcn@latest add https://better-auth-ui.com/r/accept-invitation-card.json
+  ```
+  </Tab>
+  <Tab value="pnpm">
+  ```shell
+  pnpx shadcn@latest add https://better-auth-ui.com/r/accept-invitation-card.json
+  ```
+  </Tab>
+  <Tab value="yarn">
+  ```shell
+  yarn shadcn add https://better-auth-ui.com/r/accept-invitation-card.json
+  ```
+  </Tab>
+  <Tab value="bun">
+  ```shell
+  bunx shadcn@latest add https://better-auth-ui.com/r/accept-invitation-card.json
+  ```
+  </Tab>
+</Tabs>
+
 ## Usage
 
 This component is typically used on a dedicated invitation acceptance page:
@@ -58,7 +83,7 @@ export default function AcceptInvitationPage() {
 ### With Custom Class Names
 
 ```tsx
-<AcceptInvitationCard 
+<AcceptInvitationCard
   classNames={{
     base: "max-w-md",
     header: "text-center",
@@ -70,7 +95,7 @@ export default function AcceptInvitationPage() {
 ### With Custom Localization
 
 ```tsx
-<AcceptInvitationCard 
+<AcceptInvitationCard
   localization={{
     ACCEPT_INVITATION: "Join Team",
     REJECT: "Decline",
@@ -130,4 +155,4 @@ Set up the invitation route in your auth configuration:
 2. **Expiration Time**: Set reasonable expiration (7-14 days)
 3. **Email Template**: Customize invitation email design
 4. **Success Redirect**: Configure post-acceptance redirect
-5. **Error Pages**: Handle invalid invitation gracefully 
+5. **Error Pages**: Handle invalid invitation gracefully

docs/content/docs/components/account-settings-cards.mdx

@@ -3,6 +3,31 @@ title: <AccountSettingsCards />
 description: A collection of account management cards for user profile settings
 ---
 
+## Installation
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">
+  ```shell
+  npx shadcn@latest add https://better-auth-ui.com/r/account-settings-cards.json
+  ```
+  </Tab>
+  <Tab value="pnpm">
+  ```shell
+  pnpx shadcn@latest add https://better-auth-ui.com/r/account-settings-cards.json
+  ```
+  </Tab>
+  <Tab value="yarn">
+  ```shell
+  yarn shadcn add https://better-auth-ui.com/r/account-settings-cards.json
+  ```
+  </Tab>
+  <Tab value="bun">
+  ```shell
+  bunx shadcn@latest add https://better-auth-ui.com/r/account-settings-cards.json
+  ```
+  </Tab>
+</Tabs>
+
 ## Import
 
 ```tsx
@@ -95,4 +120,4 @@ The component supports full localization through the `localization` prop:
 - [`<SettingsCards />`](/docs/components/settings-cards) - Parent component with navigation
 - [`<UpdateAvatarCard />`](/docs/components/update-avatar-card) - Individual avatar update card
 - [`<UpdateNameCard />`](/docs/components/update-name-card) - Individual name update card
-- [`<AccountsCard />`](/docs/components/accounts-card) - Linked accounts management 
+- [`<AccountsCard />`](/docs/components/accounts-card) - Linked accounts management

docs/content/docs/components/accounts-card.mdx

@@ -3,6 +3,31 @@ title: <AccountsCard />
 description: Displays and manages linked social accounts
 ---
 
+## Installation
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">
+  ```shell
+  npx shadcn@latest add https://better-auth-ui.com/r/accounts-card.json
+  ```
+  </Tab>
+  <Tab value="pnpm">
+  ```shell
+  pnpx shadcn@latest add https://better-auth-ui.com/r/accounts-card.json
+  ```
+  </Tab>
+  <Tab value="yarn">
+  ```shell
+  yarn shadcn add https://better-auth-ui.com/r/accounts-card.json
+  ```
+  </Tab>
+  <Tab value="bun">
+  ```shell
+  bunx shadcn@latest add https://better-auth-ui.com/r/accounts-card.json
+  ```
+  </Tab>
+</Tabs>
+
 ## Import
 
 ```tsx
@@ -44,4 +69,4 @@ export function AccountSettings() {
 - Unlink existing social accounts
 - Shows provider icons and account information
 - Built-in loading states
-- Prevents unlinking if it's the only authentication method 
+- Prevents unlinking if it's the only authentication method

docs/content/docs/components/api-keys-card.mdx

@@ -4,6 +4,31 @@ title: <APIKeysCard />
 
 The `<APIKeysCard />` component provides a complete interface for managing API keys, including creating, viewing, and deleting API keys for programmatic access to your application.
 
+## Installation
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">
+  ```shell
+  npx shadcn@latest add https://better-auth-ui.com/r/api-keys-card.json
+  ```
+  </Tab>
+  <Tab value="pnpm">
+  ```shell
+  pnpx shadcn@latest add https://better-auth-ui.com/r/api-keys-card.json
+  ```
+  </Tab>
+  <Tab value="yarn">
+  ```shell
+  yarn shadcn add https://better-auth-ui.com/r/api-keys-card.json
+  ```
+  </Tab>
+  <Tab value="bun">
+  ```shell
+  bunx shadcn@latest add https://better-auth-ui.com/r/api-keys-card.json
+  ```
+  </Tab>
+</Tabs>
+
 ## Usage
 
 ```tsx
@@ -39,7 +64,7 @@ export function APIKeysSettingsPage() {
 ### With Custom Class Names
 
 ```tsx
-<APIKeysCard 
+<APIKeysCard
   classNames={{
     base: "shadow-md",
     button: "rounded-full",
@@ -51,7 +76,7 @@ export function APIKeysSettingsPage() {
 ### With Custom Localization
 
 ```tsx
-<APIKeysCard 
+<APIKeysCard
   localization={{
     API_KEYS: "Developer Keys",
     CREATE_API_KEY: "Generate New Key",
@@ -128,4 +153,4 @@ Shows newly created key with:
 2. **Expiration Policy**: Always set expiration for production keys
 3. **Key Rotation**: Regularly rotate API keys
 4. **Access Control**: Limit who can create/delete keys
-5. **Monitoring**: Track API key usage 
+5. **Monitoring**: Track API key usage

docs/content/docs/components/auth-loading.mdx

@@ -4,6 +4,31 @@ title: <AuthLoading />
 
 The `<AuthLoading />` component renders its children only during an authentication session loading. This provides an easy way for you to insert loading states or skeleton loaders into your UI, enhancing user experience during data fetching.
 
+## Installation
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">
+  ```shell
+  npx shadcn@latest add https://better-auth-ui.com/r/auth-loading.json
+  ```
+  </Tab>
+  <Tab value="pnpm">
+  ```shell
+  pnpx shadcn@latest add https://better-auth-ui.com/r/auth-loading.json
+  ```
+  </Tab>
+  <Tab value="yarn">
+  ```shell
+  yarn shadcn add https://better-auth-ui.com/r/auth-loading.json
+  ```
+  </Tab>
+  <Tab value="bun">
+  ```shell
+  bunx shadcn@latest add https://better-auth-ui.com/r/auth-loading.json
+  ```
+  </Tab>
+</Tabs>
+
 ## Usage
 
 Wrap loading placeholders or loader components with `<AuthLoading />` to conditionally render them whenever authentication session data is being fetched.
@@ -82,4 +107,4 @@ export function YourCustomSkeleton() {
 }
 ```
 
-This example skeleton provides placeholder components resembling the size and shape of loaded content, greatly reducing UI flicker and enhancing user-perceived loading performance.
+This example skeleton provides placeholder components resembling the size and shape of loaded content, greatly reducing UI flicker and enhancing user-perceived loading performance.

docs/content/docs/components/auth-ui-provider.mdx

@@ -4,6 +4,31 @@ title: <AuthUIProvider />
 
 The `<AuthUIProvider />` wraps your application with authentication context, providing essential hooks, settings, and methods required by authentication-related components and hooks throughout your app.
 
+## Installation
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">
+  ```shell
+  npx shadcn@latest add https://better-auth-ui.com/r/auth-ui-provider.json
+  ```
+  </Tab>
+  <Tab value="pnpm">
+  ```shell
+  pnpx shadcn@latest add https://better-auth-ui.com/r/auth-ui-provider.json
+  ```
+  </Tab>
+  <Tab value="yarn">
+  ```shell
+  yarn shadcn add https://better-auth-ui.com/r/auth-ui-provider.json
+  ```
+  </Tab>
+  <Tab value="bun">
+  ```shell
+  bunx shadcn@latest add https://better-auth-ui.com/r/auth-ui-provider.json
+  ```
+  </Tab>
+</Tabs>
+
 ## Usage
 
 ```tsx title="providers.tsx"
@@ -104,4 +129,4 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     </html>
   )
 }
-```
+```

docs/content/docs/components/auth-view.mdx

@@ -4,6 +4,31 @@ title: <AuthView />
 
 The `<AuthView />` component provides an interactive and customizable authentication interface that seamlessly integrates with your authentication flow. It supports multiple authentication methods, including email/password, magic links, passkey (WebAuthn), and social providers.
 
+## Installation
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">
+  ```shell
+  npx shadcn@latest add https://better-auth-ui.com/r/auth-view.json
+  ```
+  </Tab>
+  <Tab value="pnpm">
+  ```shell
+  pnpx shadcn@latest add https://better-auth-ui.com/r/auth-view.json
+  ```
+  </Tab>
+  <Tab value="yarn">
+  ```shell
+  yarn shadcn add https://better-auth-ui.com/r/auth-view.json
+  ```
+  </Tab>
+  <Tab value="bun">
+  ```shell
+  bunx shadcn@latest add https://better-auth-ui.com/r/auth-view.json
+  ```
+  </Tab>
+</Tabs>
+
 ## Reference
 
 The following props can be passed to `<AuthView />` for customization:
@@ -57,4 +82,4 @@ You can thoroughly customize `<AuthView />` components using TailwindCSS utility
         footerLink: "text-destructive hover:text-foreground",
     }}
 />
-```
+```

docs/content/docs/components/change-email-card.mdx

@@ -7,6 +7,31 @@ The `<ChangeEmailCard />` component provides a simple and secure UI that allows
 <img alt="Change Email Card" src="/screenshots/change-email-card-dark.png" className="rounded-xl hidden dark:block w-lg mt-0 mb-0" />
 <img alt="Change Email Card" src="/screenshots/change-email-card-light.png" className="rounded-xl dark:hidden w-lg mt-0 mb-0" />
 
+## Installation
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">
+  ```shell
+  npx shadcn@latest add https://better-auth-ui.com/r/change-email-card.json
+  ```
+  </Tab>
+  <Tab value="pnpm">
+  ```shell
+  pnpx shadcn@latest add https://better-auth-ui.com/r/change-email-card.json
+  ```
+  </Tab>
+  <Tab value="yarn">
+  ```shell
+  yarn shadcn add https://better-auth-ui.com/r/change-email-card.json
+  ```
+  </Tab>
+  <Tab value="bun">
+  ```shell
+  bunx shadcn@latest add https://better-auth-ui.com/r/change-email-card.json
+  ```
+  </Tab>
+</Tabs>
+
 ## Usage
 
 Here's how to implement `<ChangeEmailCard />` on your custom settings page:
@@ -63,4 +88,4 @@ You can pass custom text via the `localization` prop:
         EMAIL_VERIFY_CHANGE: "Check your inbox for the verification link!"
     }}
 />
-```
+```