Newsletter Form
Newsletter signup form with an email field in two styles: a filled input group with the button inside, or a footer line with an arrow button. Posts to a URL or Server Function and announces status text.
pnpm dlx shadcn add @01orbital/newsletter-formThe source comes with full access.
One payment of $149 opens the source right here and lets the CLI install every paid component, with lifetime updates.
Usage
import { NewsletterForm } from "@/components/forms/newsletter-form"
// The copy: change text here, not in the markup.
const COPY = {
label: "Email address",
placeholder: "you@example.com",
cta: "Subscribe",
} as const
/** Newsletter Form: the email field with its button inside, at a readable width. */
export default function NewsletterFormDemo() {
return (
<NewsletterForm
label={COPY.label}
placeholder={COPY.placeholder}
cta={COPY.cta}
className="w-full max-w-md"
/>
)
}Examples
New
newsletter-form-letters
New
newsletter-form-postcard
New
newsletter-form-light-line
Anatomy
Newsletter Form is built from 2 parts. In the example they nest like this:
NewsletterFormAPI reference
NewsletterForm
Prop
Type
It also accepts the HTML attributes of the element it renders.
NewsletterLineForm
Prop
Type
It also accepts the HTML attributes of the element it renders.
Dependencies
npm: @phosphor-icons/react, cn. The CLI installs them for you.
Registry pieces it installs with it: