Call to action sections for React and Tailwind
Free call to action blocks for React and Tailwind CSS: CTA bands, glowing CTA panels, sticky CTA bars, magnetic buttons, contact sales and waitlist forms. MIT.
A call to action section is the last thing on a landing page and the one with the clearest job. These blocks cover the common shapes: a full-width band, a glowing panel, a sticky bar that follows the reader, a waitlist form and a contact sales panel for enterprise pages.
Tailwind call to action banner with a heading, supporting text and a primary button that stacks on mobile and sits in a row on wider screens.
npx shadcn@latest add @minidev/cta-bannerCode Sticky Cta Bar
motionA Tailwind floating CTA bar that slides up from the bottom once the page scrolls past 320px, with a title, a docs link and a magnetic get started button.
npx shadcn@latest add @minidev/sticky-cta-barCode Magnetic Cta
motionA magnetic button that drifts toward the cursor on a spring and snaps back on leave. Takes all Button props plus a strength value; static for reduced motion.
npx shadcn@latest add @minidev/magnetic-ctaCode Contact Sales
motionA contact sales page with an animated headline, a case study card and press quote on one side, and a work email, company and message form on the other.
npx shadcn@latest add @minidev/contact-salesCode An inline email capture form with a required email field and a Subscribe button that stack on mobile and sit side by side on wider screens. Tailwind styled.
npx shadcn@latest add @minidev/newsletter-signupCode Command Waitlist
motionA React terminal styled waitlist card with a join --email prompt, a required email input and a join button that confirms, springing into view on scroll.
npx shadcn@latest add @minidev/command-waitlistCode Product Launch
motionA product launch page with a scroll progress rail, kinetic hero, device stack, sticky feature story, before and after wipe, stats, countdown and waitlist.
npx shadcn@latest add @minidev/product-launchCode Frequently asked questions
How many CTAs should a landing page have?
One primary action, repeated: in the hero, after the features and at the end. The text should be the same each time so people recognise it.