"use client"; import { GridPattern } from "./grid-pattern"; import { Button } from "@/components/ui/button"; import clsx from "clsx"; import { Github, Icon } from "lucide-react"; import { useTheme } from "next-themes"; import Link from "next/link"; import { Highlight, themes } from "prism-react-renderer"; import { Fragment, useEffect, useId, useState } from "react"; import { LayoutGroup, motion } from "framer-motion"; import { Icons } from "../icons"; import { Cover } from "../ui/cover"; import { PulicBetaBadge } from "../beta/badge"; function Glow() { const id = useId(); return (
); } const tabs = [ { name: "auth.ts", code: `export const auth = betterAuth({ database: { provider: "postgresql", url: process.env.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() { const theme = useTheme(); const [activeTab, setActiveTab] = useState("auth.ts"); const code = tabs.find((tab) => tab.name === activeTab)?.code ?? ""; return (

Better Auth.

The most comprehensive authentication library for TypeScript.

{ <>
Get Started
}
{tabs.map((tab) => ( setActiveTab(tab.name)} className={clsx( "flex h-6 rounded-full cursor-pointer", activeTab === tab.name ? "bg-gradient-to-r from-stone-400/90 via-stone-400 to-orange-400/20 p-px font-medium text-stone-300" : "text-slate-500", )} >
{tab.name}
))}
{({ 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 ( ); }