Command Palette

Search for a command to run...

Docs
Banner Newsletter

Banner Newsletter

A newsletter subscription banner with email input and submit button.

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

PropTypeDefaultDescription
titlestring"Stay in the loop"The banner title
descriptionstring"Get the latest updates..."Supporting description
placeholderstring"Enter your email"Email input placeholder
submitLabelstring"Subscribe"Submit button text
successMessagestring"Thanks for subscribing!"Message shown on success
position"bottom" | "top" | "floating""bottom"Banner position
dismissiblebooleantrueWhether banner can be dismissed
onSubmit(email: string) => Promise<void> | void-Callback when form submitted
onDismiss() => void-Callback when dismissed
classNamestring-Additional CSS classes

Positions

PositionDescription
bottomFixed to bottom edge, full width
topFixed to top edge, full width
floatingCentered floating card at bottom