); } const allDbs = [...dbDrivers, ...ormAdapters]; function getDbIcon(name: string) { const found = allDbs.find((d) => d.name === name); return found ? found.icon() : null; } export function DatabaseSection() { const [activeDb, setActiveDb] = useState("PostgreSQL"); const dbOptions = Object.keys(dbCodeExamples); const codeScrollRef = useRef(null); const sidebarRef = useRef(null); const isFirstRender = useRef(true); useEffect(() => { if (isFirstRender.current) { isFirstRender.current = false; return; } const el = codeScrollRef.current; if (el) { el.scrollTop = 0; } const sidebar = sidebarRef.current; if (sidebar) { const active = sidebar.querySelector( `[data-db="${activeDb}"]`, ) as HTMLElement | null; if (active) { active.scrollIntoView({ block: "nearest", behavior: "smooth" }); } } }, [activeDb]); return (

Bring Your Own{" "} Database

Use any database you want. Connect directly with a connection string, or use your favorite ORM adapter. Your data stays in your database.

{/* Tabs */}

{dbOptions.map((db) => ( ))}

{/* Code + Sidebar side by side, same fixed height */}

{/* Code snippet */}

{/* Right sidebar — supported DBs & community */}

Direct Drivers

{dbDrivers.map((db) => ( ))}

ORM Adapters

{ormAdapters.map((adapter) => ( ))}

Community

{["Supabase", "Neon", "Turso", "PlanetScale", "D1"].map( (name) => (

{name}

), )}

); } export function SocialProvidersSection() { const containerRef = useRef(null); const [scrollIndex, setScrollIndex] = useState(0); const visibleRows = 2; const perRow = 5; const rowHeight = 34; const totalRows = Math.ceil(socialProviders.length / perRow); const maxScroll = totalRows - visibleRows; useEffect(() => { const interval = setInterval(() => { setScrollIndex((prev) => (prev >= maxScroll ? 0 : prev + 1)); }, 2500); return () => clearInterval(interval); }, [maxScroll]); const allRows = Array.from({ length: totalRows }, (_, rowIdx) => socialProviders.slice(rowIdx * perRow, rowIdx * perRow + perRow), ); return (

35+

social providers

{allRows.map((row, rowIdx) => (

{row.map((provider) => { const Icon = providerIcons[provider]; return ( {Icon && ( {Icon()} )} {provider} ); })}

))}

); } export function PluginEcosystem() { const half = Math.ceil(plugins.length / 2); const row1 = plugins.slice(0, half); const row2 = plugins.slice(half); return (

Plugin Ecosystem {plugins.length} official

browse all →

{/* Row 1 — scrolls left */}

{[...row1, ...row1].map((plugin, i) => ( {plugin.name} {categoryLabels[plugin.category]} ))}

{/* Row 2 — scrolls right */}

{[...row2, ...row2].map((plugin, i) => ( {plugin.name} {categoryLabels[plugin.category]} ))}

{/* Side fades */}

); } const mcpClients = [ { name: "Cursor", cmd: "npx @better-auth/cli mcp --cursor" }, { name: "Claude Code", cmd: "claude mcp add better-auth" }, { name: "Open Code", cmd: "npx @better-auth/cli mcp --open-code" }, ]; export function AiNativeSection() { const steps = [ { label: "mcp", text: "Connected to better-auth docs" }, { label: "skill", text: "better-auth/add-provider → google" }, { label: "skill", text: "better-auth/add-plugin → two-factor" }, { label: "write", text: "lib/auth.ts", lines: 14 }, { label: "done", text: "Google OAuth + 2FA configured" }, ]; return (

AI Native

Your auth lives in{" "} your codebase {" "} — so AI can configure it. Ships with{" "} MCP server ,{" "} Claude Code skills , and{" "} Cursor rules .

{/* Prompt line */}

› Add Google login and 2FA to my app

{/* Steps */}

{steps.map((step) => (

{step.label} {step.text} {"lines" in step && typeof step.lines === "number" && ( +{step.lines} )} {step.label === "done" && ( )}

))}

{/* MCP clients */}

{mcpClients.map((mc) => (

{mc.name}


									{mc.cmd}

))}

); }