Installation
Usage
import BannerNewsletter from "@/components/ruixen/banner-newsletter";
export default function MyNewsletterBanner() {
const handleSubmit = async (email: string) => {
// Add your subscription logic here
await subscribeToNewsletter(email);
};
return (
<BannerNewsletter
position="bottom"
title="Stay in the loop"
description="Get the latest updates delivered to your inbox."
onSubmit={handleSubmit}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Stay in the loop" | The banner title |
description | string | "Get the latest updates..." | Supporting description |
placeholder | string | "Enter your email" | Email input placeholder |
submitLabel | string | "Subscribe" | Submit button text |
successMessage | string | "Thanks for subscribing!" | Message shown on success |
position | "bottom" | "top" | "floating" | "bottom" | Banner position |
dismissible | boolean | true | Whether banner can be dismissed |
onSubmit | (email: string) => Promise<void> | void | - | Callback when form submitted |
onDismiss | () => void | - | Callback when dismissed |
className | string | - | Additional CSS classes |
Positions
| Position | Description |
|---|---|
bottom | Fixed to bottom edge, full width |
top | Fixed to top edge, full width |
floating | Centered floating card at bottom |

