kevingirelli

Newsletter

CTAs 7

About

An inline newsletter sign-up band with a title/description on one side and an email form with pending, success and error states on the other.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Newsletter to your project and fits it to your theme.

Code

How Newsletter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function NewsletterDemo() {
  return (
    <Newsletter
      onSubscribe={async (email) => {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        console.log("subscribed", email);
      }}
    />
  );
}

More by kevingirelli

View all
  • QR Code

    QR Code

    124
  • Aurora

    Aurora

    115
  • FAQ Section

    FAQ Section

    73
  • Animated Border

    Animated Border

    66
  • Warp Gradient

    Warp Gradient

    58
  • Corner Frame

    Corner Frame

    54
  • Wave Text

    Wave Text

    53
  • Spotlight

    Spotlight

    40

More in CTAs

View all
  • Hills Landscape Footer with Call to Action

    Hills Landscape Footer with Call to Action

    182
  • CTA 3

    CTA 3

    414
  • Call to Action 01

    Call to Action 01

    58
  • Call To Action

    Call To Action

    29
  • Responsive Hero Banner

    Responsive Hero Banner

    2.1K
  • Hero

    Hero

    1.3K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    1K
  • Cta 4

    Cta 4

    301