{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "otp-email", "title": "OTP Email", "description": "Email template component that sends one-time password (OTP) verification codes to users.", "dependencies": [ "@better-auth-ui/react@latest", "@better-auth-ui/core@latest", "react-email" ], "registryDependencies": [], "files": [ { "path": "../../packages/react/src/components/auth/email/otp-email.tsx", "content": "import type { ReactNode } from \"react\"\nimport {\n Body,\n Container,\n Head,\n Heading,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n pixelBasedPreset,\n Section,\n Tailwind,\n Text\n} from \"react-email\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n type EmailClassNames,\n type EmailColors,\n EmailStyles\n} from \"./email-styles\"\n\nconst otpEmailLocalization = {\n YOUR_VERIFICATION_CODE_IS_CODE:\n \"Your verification code is {verificationCode}\",\n LOGO: \"Logo\",\n VERIFY_YOUR_EMAIL: \"Verify your email\",\n WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS:\n \"We need to verify your email address {email} before you can access your {appName} account. Enter the code below in your open browser window.\",\n THIS_CODE_EXPIRES_IN_MINUTES:\n \"This code expires in {expirationMinutes} minutes.\",\n EMAIL_SENT_BY: \"Email sent by {appName}.\",\n IF_YOU_DIDNT_REQUEST_THIS_EMAIL:\n \"If you didn't request this email, you can safely ignore it. Someone else might have typed your email address by mistake.\",\n POWERED_BY_BETTER_AUTH: \"Powered by {betterAuth}\"\n}\n\n/**\n * Localization strings for the OtpEmail component.\n *\n * Contains all text content used in the OTP (One-Time Password) email template.\n */\nexport type OtpEmailEmailLocalization = typeof otpEmailLocalization\n\n/**\n * Props for the OtpEmail component.\n */\nexport interface OtpEmailProps {\n /** The one-time verification code to display */\n verificationCode: string\n /** Email address being verified */\n email?: string\n /** Name of the application sending the email */\n appName?: string\n /** Number of minutes until the verification code expires */\n expirationMinutes?: number\n /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */\n logoURL?: string | { light: string; dark: string }\n /** Custom CSS class names for styling specific parts of the email */\n classNames?: EmailClassNames\n /** Custom color scheme for light and dark modes */\n colors?: EmailColors\n /** Whether to show the \"Powered by better-auth\" footer */\n poweredBy?: boolean\n /** Whether to enable dark mode support */\n darkMode?: boolean\n /** Additional React nodes to inject into the email head */\n head?: ReactNode\n /**\n * Localization overrides for customizing email text\n * @remarks `OtpEmailEmailLocalization`\n */\n localization?: Partial\n}\n\n/**\n * Email template component that sends one-time password (OTP) verification codes to users.\n *\n * This email includes:\n * - Large, prominently displayed verification code\n * - Expiration time information\n * - Security notice for unauthorized requests\n * - Customizable branding and styling\n * - Support for light/dark mode themes\n *\n * @example\n * ```tsx\n * \n * ```\n */\nexport const OtpEmail = ({\n verificationCode,\n email,\n appName,\n expirationMinutes = 10,\n logoURL,\n colors,\n classNames,\n darkMode = true,\n poweredBy,\n head,\n ...props\n}: OtpEmailProps) => {\n const localization = {\n ...OtpEmail.localization,\n ...props.localization\n }\n\n const previewText = localization.YOUR_VERIFICATION_CODE_IS_CODE.replace(\n \"{verificationCode}\",\n verificationCode\n )\n\n return (\n \n \n \n \n\n \n\n {head}\n \n\n {previewText}\n\n \n \n \n \n {logoURL &&\n (typeof logoURL === \"string\" ? (\n \n ) : (\n <>\n \n \n \n ))}\n\n \n {localization.VERIFY_YOUR_EMAIL}\n \n\n \n {(() => {\n const textWithAppName =\n localization.WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS.replace(\n \"{appName}\",\n appName || \"\"\n )\n .replace(/\\s{2,}/g, \" \")\n .replace(\" .\", \".\")\n\n const [beforeEmail, afterEmail] =\n textWithAppName.split(\"{email}\")\n\n return email ? (\n <>\n {beforeEmail}\n\n \n {email}\n \n\n {afterEmail}\n \n ) : (\n textWithAppName\n .replace(\"{email}\", \"\")\n .replace(/\\s{2,}/g, \" \")\n .replace(\" .\", \".\")\n )\n })()}\n \n\n \n \n {verificationCode}\n \n \n\n \n\n \n {localization.THIS_CODE_EXPIRES_IN_MINUTES.replace(\n \"{expirationMinutes}\",\n expirationMinutes.toString()\n )}\n {appName && (\n <>\n {\" \"}\n {localization.EMAIL_SENT_BY.replace(\"{appName}\", appName)}\n \n )}\n \n\n \n {localization.IF_YOU_DIDNT_REQUEST_THIS_EMAIL}\n \n\n {poweredBy && (\n \n {(() => {\n const [beforeBetterAuth, afterBetterAuth] =\n localization.POWERED_BY_BETTER_AUTH.split(\"{betterAuth}\")\n\n return (\n <>\n {beforeBetterAuth}\n \n better-auth\n \n {afterBetterAuth}\n \n )\n })()}\n \n )}\n \n \n \n \n \n )\n}\n\nOtpEmail.localization = otpEmailLocalization\n\nOtpEmail.PreviewProps = {\n verificationCode: \"069420\",\n email: \"m@example.com\",\n appName: \"Better Auth\",\n darkMode: true\n} as OtpEmailProps\n\nexport default OtpEmail\n", "type": "registry:component", "target": "@components/auth/email/otp-email.tsx" }, { "path": "../../packages/react/src/components/auth/email/email-styles.tsx", "content": "/**\n * Default color scheme for email templates in light and dark modes.\n *\n * Provides a consistent color palette that can be customized via the EmailColors type.\n */\nexport const defaultColors = {\n light: {\n background: \"#F5F5F5\",\n border: \"#E5E5E5\",\n card: \"#FFFFFF\",\n cardForeground: \"#0A0A0A\",\n foreground: \"#262626\",\n muted: \"#F5F5F5\",\n mutedForeground: \"#737373\",\n primary: \"#171717\",\n primaryForeground: \"#FAFAFA\"\n },\n dark: {\n background: \"#0A0A0A\",\n border: \"#2E2E2E\",\n card: \"#171717\",\n cardForeground: \"#FAFAFA\",\n foreground: \"#D4D4D4\",\n muted: \"#212121\",\n mutedForeground: \"#A1A1A1\",\n primary: \"#E5E5E5\",\n primaryForeground: \"#171717\"\n }\n}\n\n/**\n * Custom CSS class names for styling different parts of email templates.\n *\n * Allows fine-grained control over the appearance of email components.\n */\nexport type EmailClassNames = {\n body?: string\n container?: string\n card?: string\n logo?: string\n title?: string\n content?: string\n button?: string\n description?: string\n separator?: string\n link?: string\n poweredBy?: string\n codeBlock?: string\n}\n\n/**\n * Custom color scheme configuration for email templates.\n *\n * Supports separate color definitions for light and dark modes.\n * Any color not specified will fall back to the defaultColors values.\n */\nexport type EmailColors = {\n light?: Partial\n dark?: Partial\n}\n\n/**\n * Props for the EmailStyles component.\n */\ninterface EmailStylesProps {\n /** Custom color scheme for light and dark modes */\n colors?: EmailColors\n /** Whether to enable dark mode support */\n darkMode?: boolean\n}\n\n/**\n * Component that injects CSS styles for email templates with support for light and dark modes.\n *\n * Generates inline styles that adapt to the user's color scheme preference and applies\n * custom colors if provided. Handles logo visibility switching between light and dark modes.\n *\n * @param props - Style configuration options\n * @returns A style element containing CSS for email template theming\n *\n * @example\n * ```tsx\n * \n * ```\n */\nexport const EmailStyles = ({ colors, darkMode = true }: EmailStylesProps) => {\n return (\n \n )\n}\n\nexport default EmailStyles\n", "type": "registry:component", "target": "@components/auth/email/email-styles.tsx" } ], "type": "registry:component" }