Skip to component
GGamma

Newsletter capture

A compact email capture that validates, submits, and confirms without losing the field.

New
Live previewUse keyboard to interact

Implementation

1"use client";2 3import {4  useId,5  useRef,6  useState,7  type FormEvent,8  type HTMLAttributes,9} from "react";10import { ArrowRight, Check } from "lucide-react";11 12export type NewsletterResult = void | { ok?: boolean; message?: string };13 14export type NewsletterCaptureProps = Omit<15  HTMLAttributes<HTMLDivElement>,16  "children" | "onSubmit" | "title"17> & {18  title?: string;19  description?: string;20  /** Visible label for the email field. */21  fieldLabel?: string;22  placeholder?: string;23  submitLabel?: string;24  /** Receives the validated address. Throw or return `{ ok: false }` to show a recovery message. */25  onSubmit?: (email: string) => NewsletterResult | Promise<NewsletterResult>;26  successTitle?: string;27  successMessage?: string;28  privacyNote?: string;