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.

npx @kznlabs/labsui add newsletter

"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.");      }}    />  );}

<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.
placeholderdefault "you@example.com"
string
Email field placeholder.
submitLabeldefault "Subscribe"
string
Submit button text.
successMessagedefault "Check your inbox to confirm"
ReactNode
Toast after success, e.g. "Check your inbox to confirm".
title
ReactNode
Heading above the form.

Prop	Type	Default
`onSubscribe*` Resolves when the address is saved; a rejection shows its message in the toast.	`(email: string) => Promise<unknown>`	—
`description` Supporting line under the heading.	`ReactNode`	—
`placeholder` Email field placeholder.	`string`	`"you@example.com"`
`submitLabel` Submit button text.	`string`	`"Subscribe"`
`successMessage` Toast after success, e.g. "Check your inbox to confirm".	`ReactNode`	`"Check your inbox to confirm"`
`title` Heading above the form.	`ReactNode`	—

* required. Every component also takes className.