Components
Loading preview...
Newsletter Card A visually polished and accessible newsletter sign-up form. It features a distinct, theme-aware color palette and subtle animations on focus and hover to enhance user experience.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/newsletter-card"use client"; // Required for useState and event handlers
import { NewsletterSignUp } from "@/components/ui/newsletter-card";
export default function NewsletterSignUpDemo() {
// Demo handler function to show submission success
const handleSubscribe = (email: string) => {
alert(`Thank you for subscribing with: ${email}`);
};
return (
<div className="flex min-h-[400px] w-full items-center justify-center bg-background p-4">
<NewsletterSignUp
title="Stay in the know."
subtitle="Get the Measured Newsletter"
placeholder="Your email address"
buttonAriaLabel="Submit email for newsletter"
onSubmit={handleSubscribe}
/>
</div>
);
}