Koala UI

Newsletter Form

A ready-to-ship email-capture block. It owns its own email state, validates the address and runs the loading to success flow. Two layouts: a self-contained card and a single-row inline signup.

Subscribe to our newsletter

Product updates, design tips, and the occasional deep dive. No spam, unsubscribe anytime.

We care about your data. Read our privacy policy.

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add newsletter-form

Usage#

usage.tsxTSX
"use client"import { NewsletterForm } from "@/components/ui/newsletter-form"export function Example() {  async function subscribe(email: string) {    await fetch("/api/newsletter", { method: "POST", body: JSON.stringify({ email }) })  }  return <NewsletterForm onSubscribe={subscribe} />}

Inline#

variant="inline" drops the card chrome for a single row, ideal inside a Footer or a hero section.

API reference#

NewsletterForm

A self-contained signup composed from Input and Button. Forwards all <div> props.

  • variant: "card" (default) or "inline".
  • onSubscribe: (email: string) => void | Promise<void>. Return a promise to keep the spinner up until your request resolves.
  • title, description, placeholder, action, fineprint: override the default copy (card variant). Pass null to hide description or fineprint.

FAQ#

No. NewsletterForm is a ready-to-ship block: it owns its own email state, validates the address, and runs the loading then success flow. Drop it in and it works.