kevingirelli

Newsletter

CTAs 4

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
  • Aurora

    Aurora

    54
  • Warp Gradient

    Warp Gradient

    48
  • QR Code

    QR Code

    47
  • FAQ Section

    FAQ Section

    46
  • Wave Text

    Wave Text

    37
  • Corner Frame

    Corner Frame

    36
  • Animated Border

    Animated Border

    32
  • Spotlight

    Spotlight

    23

More in CTAs

View all
  • CTA 3

    CTA 3

    403
  • Call To Action

    Call To Action

    28
  • Button

    Button

    76
  • Call to action

    Call to action

    172
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    926
  • Hero

    Hero

    1.2K
  • Pricing Section

    Pricing Section

    173
  • Responsive Hero Banner

    Responsive Hero Banner

    2K