1

Newsletter

A footer with a release notes signup: wordmark, tagline and an email form on the start side, four link columns on the end side, and a bottom bar with copyright and legal links.

Dependencies

@radix-ui/react-slot@hugeicons/react@hugeicons/core-free-icons

Interaction Type

A footer landmark. The email field has a visible label and native validation; submitting calls onSubscribe and announces the success line through a polite live region. The submit button is 44px with an aria-label, and its arrow nudges forward on hover.

Props

Options you can pass to customize this component.

Prop
Type
Description
tagline
ReactNode

Short line under the wordmark.

columns
{ title: string; links: { label: string; href: string }[] }[]

Titled link columns. Two per row on mobile, four from the small breakpoint.

onSubscribe
(email: string) => void

Called with the email on submit. The form resets and shows successMessage.

formLabel
string

Visible label of the email field. Defaults to "Release notes by email".

placeholder
string

Placeholder of the email field.

submitLabel
string

Accessible name of the submit button. Defaults to "Subscribe".

successMessage
string

Announced after a submit.

legal
{ label: string; href: string }[]

Links on the bottom bar.

brand
ReactNode

Wordmark or logo. Defaults to the "Nexvyn UI" wordmark.

copyright
ReactNode

Small print line. Defaults to "© 2026 Nexvyn". Pass null to hide it.

className
string

Merged onto the footer with cn().

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/footer-newsletter.json

How to use

<FooterNewsletter
  tagline="Notes on shipping calm interfaces."
  onSubscribe={(email) => subscribe(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
npx shadcn@latest addhttps://ui.nexvyn.dev/r/footer-newsletter.json