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.3.8 - Dashboard & View Components

3 New Dashboard Components - Complete dashboard views and interactive charts:

• OrganizationView - Full organization management interface with tabbed navigation
• UsageHistoryChart - Interactive usage visualization with Shadcn Charts + Recharts
• OrganizationSettingsCards - Composite organization settings component

New Ecosystem: Better Auth Plugins - Extended functionality beyond UI components:

• Usage Tracking Plugin - Track API usage, enforce limits, and manage feature access (separate package: @bettercone/better-auth-plugin-usage-tracking)

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:

# 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

🔧 Developer Components (1)

• ApiKeysCard - API key management

🛠️ 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

📊 Usage Components (3)

• ApiUsageCard - API call tracking with warnings
• FeatureAccessCard - Feature flag display
• UsageDashboard - Complete usage overview (composition)

👥 Team Components (3)

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

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

Backend Support

Works with any Better Auth backend:

Next Steps

Made with 🍦 by @bettercone/ui

Beautiful components for Better Auth