Koala UI

Newsletter Form

Pro

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# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add newsletter-form

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

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 built from Input and Button: it owns the email state, validates the address and runs the loading then success flow. Forwards native <div> props; accepts className, merged last.

PropTypeDefaultDescription
variant"card" | "inline""card"card adds a heading, lead and fine print; inline is the single row, for a Footer or a hero.
density"comfortable" | "compact"-Card padding, gap and title size (16 or 24px). Inherits the nearest DensityProvider (compact with none).
onSubscribe(email: string) => void | Promise<void>-Called with the email on a valid submit. Return a promise to keep the spinner up until it resolves.
titleReact.ReactNode"Subscribe to our newsletter"The card's heading.
descriptionReact.ReactNode"Product updates, design tips…"The card's lead. null hides it.
placeholderstring"you@company.com"The email field's placeholder.
actionReact.ReactNode"Subscribe"The submit button's label.
fineprintReact.ReactNode"We care about your data…"Small print under the card's form. null hides it.

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.