Components
Loading preview...
Newsletter Dialog A promotional dialog component designed to capture user sign-ups for a newsletter. It features a prominent image, customizable text sections, an email input field, and a call-to-action button, all wrapped in an animated, accessible modal.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/newsletter-dialog// demo.tsx
"use client";
import * as React from "react";
import { NewsletterDialog } from "@/components/ui/newsletter-dialog";
import { Button } from "@/components/ui/button";
export default function NewsletterDialogDemo() {
// State to control the dialog visibility
const [isOpen, setIsOpen] = React.useState(false);
// Handler for the subscription action
const handleSubscribe = (email: string) => {
console.log(`Subscribed with email: ${email}`);
// Here you would typically make an API call
alert(`Thank you for subscribing, ${email}!`);
};
return (
<div className="flex min-h-[300px] items-center justify-center">
<NewsletterDialog
open={isOpen}
onOpenChange={setIsOpen}
imageSrc="https://images.unsplash.com/photo-1542435503-956c469947f6?q=80&w=1974&auto=format&fit=crop"
title="JOIN OUR GROWING COMMUNITY!"
description={
<>
We love our users and our trading community. Join now to receive news
about our latest indicators and promotions.
</>
}
promoText={
<>
As a special thank you, we will send you a discount code that can be
applied to receive <strong>10% off</strong> any of our products!
</>
}
buttonText="JOIN NOW"
onSubscribe={handleSubscribe}
trigger={
<Button
variant="outline"
onClick={() => setIsOpen(true)}
>
Show Newsletter Dialog
</Button>
}
// Apply a custom green color to the button inside the dialog
// Note: This requires custom styling or a theme extension.
// For simplicity, we can use a CSS class or style prop if the component supports it.
// The component above uses the default `primary` button color.
/>
</div>
);
}