Newsletter signup

An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.

$npx shadcn@latest add @silicon-ui/newsletter-signup

Installation

$npx shadcn@latest add @silicon-ui/newsletter-signup

Install the dependencies.
$npm install @radix-ui/react-switch lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/newsletter-signup/newsletter-signup.tsx
- components/silicon-ui/blocks/newsletter-signup/newsletter-signup-data.ts
- components/silicon-ui/lib/media.ts shared
- components/silicon-ui/blocks/newsletter-signup/newsletter-signup.module.css
- components/silicon-ui/switch/switch.tsx shared
- components/silicon-ui/switch/switch.module.css shared
- components/silicon-ui/segmented-control/segmented-control.tsx shared
- components/silicon-ui/segmented-control/segmented-control.module.css shared
- components/silicon-ui/animated-counter/animated-counter.tsx shared
- components/silicon-ui/animated-counter/animated-counter.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { NewsletterSignup } from "@/components/silicon-ui/blocks/newsletter-signup/newsletter-signup";

Prop	Type	Default
`variant` `inline` puts the copy and form beside the issue stack; `card` is a self-contained card with the stack in a tray on top.	`NewsletterVariant` `"inline""card"`	`"inline"`
`title`	`string`	—
`description`	`string`	—
`placeholder`	`string`	`"you@company.com"`
`buttonLabel`	`string`	`"Subscribe"`
`privacyNote` Short line under the form about frequency and privacy.	`ReactNode`	`newsletterCopy.privacy`
`privacyLink` Link after the privacy note. Pass null to hide it.	`{ label: string; href: string } \| null`	`newsletterCopy.privacyLink`
`readers` Reader count and up to three faces. The count ticks up by one when someone subscribes. Pass null to hide it.	`{ count: number; faces: string[] } \| null`	`newsletterReaders`
`publication` The issue stack. On success the upcoming issue, addressed to the new reader, lands on top. Pass null for a form without the stack.	`NewsletterPublication \| null`	`newsletterPublication`
`onSubscribe` Called with a valid, trimmed email. Reject to show an error and keep the email; resolve to show the success state.	`(email: string) => void \| Promise<void>`	—
`className`	`string`	—

Also accepts the props of HTMLAttributes.