Shadcn.io is not affiliated with official shadcn/ui
React Newsletter Opt-In Onboarding Block
A newsletter preference onboarding block for React and Next.js with checkbox toggles, frequency badges, select all controls, and save action built with shadcn/ui and Tailwind CSS.
Configure newsletter subscriptions during onboarding with this React and Next.js block built in TypeScript. Features four newsletter types (Weekly digest, Product updates, Engineering blog, Event invites) each with a Checkbox in a label wrapper, title, and frequency Badge. Includes Select all and Deselect all action buttons and a Save Preferences button. Uses shadcn/ui Button, Badge, and Checkbox components with Framer Motion staggered entrance animations and Tailwind CSS. Perfect for SaaS email preference setup, marketing opt-in flows, and subscriber onboarding screens.
React Newsletter Opt-In Onboarding Block preview
Installation
Related Components
Notification Permissions Onboarding
Notification channel preferences
Preferences Onboarding
Toggle-based preference settings
Welcome Onboarding
Welcome screen with greeting
Completion Onboarding
Completion celebration screen
Profile Onboarding
Profile setup with avatar and bio
Checklist Onboarding
Setup checklist with progress tracking
FAQ
Was this page helpful?
Sign in to leave feedback.
React Mobile App Download Onboarding Block
A mobile app download onboarding block for React and Next.js with App Store and Google Play buttons, QR code placeholder, and skip option built with shadcn/ui and Tailwind CSS.
React Notification Permissions Onboarding Block
A notification preferences onboarding block for React and Next.js with four channel toggles, switch controls, and save preferences CTA built with shadcn/ui and Tailwind CSS.