# Newsletter

- Page: <https://kznlabs.github.io/labsUI/components/newsletter>

## Newsletter (`newsletter`, block)

Email signup: InputGroup with the submit Button inside, native email validation, a loading → success toast and an in-place success state on the button.

- Install: `npx @kznlabs/labsui add newsletter`
- Docs: <https://kznlabs.github.io/labsUI/components/newsletter>
- Brings: button, button-variants, field, input, input-group, label, toast, use-dismiss, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Newsletter>`: Email signup: InputGroup with a submit Button inside, native email validation, and a loading
toast that turns into a success toast. The button confirms in place, then resets for the next
address.
  - `onSubscribe: (email: string) => Promise<unknown>`: Resolves when the address is saved; a rejection shows its message in the toast.
  - `description?: ReactNode`: Supporting line under the heading.
  - `placeholder?: string` = `"you@example.com"`: Email field placeholder.
  - `submitLabel?: string` = `"Subscribe"`: Submit button text.
  - `successMessage?: ReactNode` = `"Check your inbox to confirm"`: Toast after success, e.g. "Check your inbox to confirm".
  - `title?: ReactNode`: Heading above the form.

### Usage

```tsx
<Newsletter title="Release notes" onSubscribe={(email) => subscribe(email)} />
```

### Example: release-notes-signup.tsx

```tsx
"use client";

import { Newsletter } from "@/components/blocks/newsletter";

export function ReleaseNotesSignup() {
  return (
    <Newsletter
      title="Release notes in your inbox"
      description="One email per release. Unsubscribe any time."
      successMessage="Check your inbox to confirm."
      onSubscribe={async (email) => {
        const res = await fetch("/api/subscribe", {
          method: "POST",
          body: JSON.stringify({ email }),
        });
        // A rejection shows its message as an error toast.
        if (!res.ok) throw new Error("Could not subscribe, try again later.");
      }}
    />
  );
}
```