Welcome to @bettercone/ui 🍦

Production-ready components for Better Auth

@bettercone/ui is a comprehensive, backend-agnostic component library built for Better Auth. Ship authentication, organizations, security, billing, and team features in minutes, not weeks.

🚀 What's New in v0.5.2 - React 19 Support & Documentation Cleanup

Enhanced Compatibility - React 19 support and cleaner documentation:

• ✅ React 19 compatibility - Extended lucide-react peer dependency range
• ✅ Modern stack support - Works with latest library versions
• ✅ Documentation cleanup - Removed changelog duplication from README
• ✅ Focused README - Points to CHANGELOG.md for detailed release notes

Peer Dependencies - React 19 Support

Extended lucide-react support:

"lucide-react": "^0.300.0 || ^0.400.0 || ^0.500.0"

• ✅ React 19 projects - Full compatibility with React 19
• ✅ Latest lucide versions - Supports v0.546.0+
• ✅ Modern stacks - Works with cutting-edge React ecosystems

🚀 What's New in v0.5.1 - Enhanced Compatibility!

Broader Library Support - Relaxed peer dependencies for modern stacks:

• ✅ lucide-react: ^0.300.0 to ^0.546.0+ (was ^0.344.0)
• ✅ tailwind-merge: ^2.0.0 || ^3.0.0 (was ^2.0.0)
• ✅ tailwindcss: ^3.4.0 || ^4.0.0 (was ^3.4.0)

Benefits:

• ✅ Eliminates peer dependency conflicts during npm install
• ✅ Supports latest library versions (Lucide v0.546, Tailwind v4)
• ✅ Enables smooth CLI installation: npx @bettercone/ui init works everywhere
• ✅ Compatible with React 19, Tailwind v4, and modern stacks

🚀 What's New in v0.5.0 - Clean Architecture: No Bundle Bloat!

Breaking Changes - Removed components not native to Better Auth:

• Removed ApiUsageCard, UsageDashboard, UsageHistoryChart, FeatureAccessCard
• Use ApiKeyUsageCard for API key-specific usage tracking instead

New API Key Components:

• ApiKeyUsageCard - Per-key usage visualization with interactive charts
• UpdateApiKeyDialog - Edit existing API keys with validation

Enhanced Components:

• ApiKeyCell - Added usage display and status indicators
• CreateApiKeyDialog - Added rate limits and refill configuration

Component Reorganization:

• Moved from components/developer/ to components/apiKey/
• Better alignment with Better Auth's architecture

v0.3.8 - Dashboard & View Components

3 New Dashboard Components - Complete dashboard views:

• OrganizationView - Full organization management interface with tabbed navigation
• OrganizationSettingsCards - Composite organization settings component

v0.3.7 - 100% Better Auth Coverage!

Enterprise SSO & OIDC Provider - Achieving 89/89 components (100% coverage)

• SSOConfigCard - Complete OIDC & SAML SSO configuration for enterprise customers
• SAMLSetupWizard - Guided 5-step SAML setup wizard with IdP presets (Azure AD, Okta, Google, etc.)
• OIDCProviderCard - OAuth2/OIDC Provider - manage client applications (RFC 7591 compliant)

Full coverage of every Better Auth plugin and feature!

v0.3.4 - Passkeys & Account Management

• PasskeySetupWizard - 5-step passkey registration wizard
• ChangeEmailCard - Two-step email change with verification
• TransferOwnershipDialog - Organization ownership transfer
• LinkAccountCard - Link OAuth providers to accounts
• UnlinkAccountCard - Unlink OAuth providers

What's New in v0.3.3

Anonymous Authentication - Enable guest access with seamless account linking

• AnonymousSignInButton - One-click guest authentication without PII
• AnonymousUpgradeCard - Encourage anonymous users to create full accounts

v0.3.0 - Stripe Billing & SIWE

Stripe Billing Integration - Full Stripe plugin support

• SubscriptionCard - Manage subscriptions, view plans, upgrade/downgrade
• PaymentMethodCard - Add/update payment methods, set default
• InvoiceHistoryCard - View invoice history with download/preview
• BillingDashboard - Complete billing overview

SIWE Components - Sign-In with Ethereum support

• SiweSignInButton - Ethereum wallet authentication
• SiweSignInForm - Complete SIWE auth form
• WalletConnectButton - Connect wallet button

v0.2.0 - Phone Authentication

• PhoneSignInForm - Sign in with phone + password
• PhoneSignUpForm - Sign up with phone + OTP verification
• PhoneNumberCard - Manage phone number in settings

Why @bettercone/ui?

• ⚛️ Framework-Agnostic - Works with Next.js, Vite, Remix, or any React framework
• 🔌 Backend-Agnostic - Works with Convex, Prisma, Supabase, Drizzle, or any Better Auth backend
• ⚡ Production-Ready - Battle-tested components used in real SaaS applications
• 🎨 Fully Customizable - Built with Tailwind CSS, customize every aspect
• 🌍 i18n Ready - Complete localization support
• 📱 Responsive - Mobile-first design that works everywhere
• 🔒 Type-Safe - Full TypeScript support with comprehensive types
• ♿ Accessible - WCAG 2.1 compliant components
• 🎉 100% Coverage - Complete implementation of all Better Auth plugins (89/89 components)

Features

Quick Start

Get started with @bettercone/ui in minutes:

# One-command setup (installs everything)
npx @bettercone/ui init

This installs @bettercone/ui, Better Auth, shadcn/ui, and all required components automatically!

Manual Setup (Alternative)

# Install the package
pnpm add @bettercone/ui better-auth

# Add to Tailwind config
# content: ['./node_modules/@bettercone/ui/**/*.{js,ts,jsx,tsx}']

# Install the package
npm install @bettercone/ui better-auth

# Add to Tailwind config
# content: ['./node_modules/@bettercone/ui/**/*.{js,ts,jsx,tsx}']

# Install the package
yarn add @bettercone/ui better-auth

# Add to Tailwind config
# content: ['./node_modules/@bettercone/ui/**/*.{js,ts,jsx,tsx}']

Example Usage

import { BillingDashboard } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function BillingPage() {
  const handleManageSubscription = async (subscription, organization) => {
    const response = await fetch("/api/billing/portal", {
      method: "POST",
      body: JSON.stringify({ organizationId: organization?.id })
    });
    const { url } = await response.json();
    window.location.href = url;
  };

  return (
    <BillingDashboard
      authClient={authClient}
      subscriptionCardProps={{
        onManageSubscription: handleManageSubscription
      }}
    />
  );
}

Components

@bettercone/ui includes 89 production-ready components organized by functionality:

🏢 Enterprise SSO (3)

• SSOConfigCard - Complete OIDC & SAML SSO configuration
• SAMLSetupWizard - Guided 5-step SAML setup wizard
• OIDCProviderCard - OAuth2/OIDC client application management

🔐 Authentication Components (3)

• AuthView - Complete auth experience with sign-in, sign-up, and password reset
• UserButton - User menu with profile and sign out
• SignedIn/SignedOut - Conditional rendering based on auth state

🔒 Security Components (7)

• SecuritySettingsCards - Complete security dashboard
• TwoFactorCard - 2FA setup and management
• PasskeysCard - Passkey/WebAuthn management
• SessionsCard - Active session management
• ChangePasswordCard - Password change form
• PhoneNumberCard - Phone number management
• ProvidersCard - Connected OAuth providers

🏢 Organization Components (4)

• OrganizationSwitcher - Switch between organizations
• OrganizationSettingsCards - Organization settings dashboard
• OrganizationMembersCard - Member management with roles
• OrganizationInvitationsCard - Pending invitations

👤 Account Components (5)

• AccountSettingsCards - Account settings dashboard
• SecuritySettingsCards - Security settings (also in Security)
• UpdateAvatarCard - Avatar upload and management
• ChangeEmailCard - Email change with verification
• DeleteAccountCard - Account deletion

� API Key Components (5)

• ApiKeysCard - Complete API key management card
• ApiKeyCell - Individual API key list item with usage
• CreateApiKeyDialog - Create new API keys with rate limits
• UpdateApiKeyDialog - Edit existing API key configuration
• ApiKeyUsageCard - Per-key usage visualization with charts

🛠️ Utility Components (1)

• PasswordInput - Password input with show/hide toggle

💳 Billing Components (4)

• SubscriptionCard - Display current subscription with management actions
• PaymentMethodCard - Payment method management via Stripe portal
• InvoiceHistoryCard - Invoice viewing and download
• BillingDashboard - Complete billing overview (composition)

💰 Pricing Components (2)

• PricingCard - Beautiful pricing cards with features and CTAs
• PricingDashboard - Complete pricing page

👥 Team Components (3)

• SeatAllocationCard - Team seat management
• TeamBillingCard - Organization billing summary
• TeamDashboard - Complete team management (composition)

Total: 89 components covering 100% of Better Auth core functionality!

Backend Support

Works with any Better Auth backend:

Next Steps

Made with 🍦 by @bettercone/ui

Beautiful components for Better Auth