"use client"; import { Fragment, useEffect, useId, useState } from "react"; import useMeasure from "react-use-measure"; import Link from "next/link"; import clsx from "clsx"; import { Button } from "@/components/ui/button"; import { Check, Copy } from "lucide-react"; import { useTheme } from "next-themes"; import { Highlight, themes } from "prism-react-renderer"; import { AnimatePresence, motion, MotionConfig } from "framer-motion"; import { Builder } from "../builder"; import { Spotlight } from "./spotlight"; import { GradientBG } from "./gradient-bg"; const tabs: { name: "auth.ts" | "client.ts"; code: string }[] = [ { name: "auth.ts", code: `export const auth = betterAuth({ database: new Pool({ connectionString: DATABASE_URL, }), emailAndPassword: { enabled: true, }, plugins: [ organization(), twoFactor(), ] })`, }, { name: "client.ts", code: `const client = createAuthClient({ plugins: [passkeyClient()] }); `, }, ]; function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) { return ( ); } export default function Hero() { return (
Own Your Auth

The most comprehensive authentication framework for TypeScript.

git: (main) x

npm add{" "} better-auth

{ <>
Get Started
}
); } function CodePreview() { const [currentTab, setCurrentTab] = useState<"auth.ts" | "client.ts">( "auth.ts", ); const theme = useTheme(); const code = tabs.find((tab) => tab.name === currentTab)?.code ?? ""; const [copyState, setCopyState] = useState(false); const [ref, { height }] = useMeasure(); const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text).then(() => { setCopyState(true); setTimeout(() => { setCopyState(false); }, 2000); }); }; const [codeTheme, setCodeTheme] = useState(themes.synthwave84); useEffect(() => { setCodeTheme( theme.resolvedTheme === "light" ? themes.oneLight : themes.synthwave84, ); }, [theme.resolvedTheme]); return ( 0 ? height : undefined }} className="from-stone-100 to-stone-200 dark:to-black/90 dark:via-stone-950/10 dark:from-stone-950/90 relative overflow-hidden rounded-sm bg-gradient-to-tr ring-1 ring-white/10 backdrop-blur-lg" >
{tabs.map((tab) => ( ))}
{({ className, style, tokens, getLineProps, getTokenProps, }) => ( 
												
													{tokens.map((line, lineIndex) => (
														

															{line.map((token, tokenIndex) => (
																
															))}
														

													))}
)}

Demo
); } export function HeroBackground(props: React.ComponentPropsWithoutRef<"svg">) { const id = useId(); return ( ); }