1

Subscribe

An email signup banner that validates inline and morphs into a thank-you message on success.

Interaction Type

Enter an email and submit. Invalid input shows an inline error linked with aria-describedby, and success crossfades the form into a confirmation.

Props

Options you can pass to customize this component.

Prop
Type
Description
title
ReactNode

Heading text.

description
ReactNode

Supporting copy.

successMessage
ReactNode

Shown after a successful signup.

emailLabel
string

Screen reader label of the input.

placeholder
string

Input placeholder.

submitLabel
string

Submit button label.

invalidMessage
string

Error shown for an invalid email.

onSubscribe
(email: string) => void | Promise<void>

Called with the email on a valid submit.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/banner-subscribe.json

How to use

<BannerSubscribe
  onSubscribe={async (email) => {
    await fetch('/api/subscribe', { method: 'POST', body: email })
  }}
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app

Get product updates

New components and blocks, once a month. No spam.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/banner-subscribe.json