proNew126 lines · framer-motion

Newsletter Inline

A one-line subscribe bar that fits at the end of anything. A compact horizontal newsletter strip — headline and blurb on one side, an email field and button on the other — that swaps the field for an inline success message on submit, with no page jump.

Use it for: The bottom of a blog post, docs page or changelog, where a full-width hero-style CTA would be overkill but a bare input with no framing feels like an afterthought.
Themes: Light + dark
License: Commercial use

Live

Newsletter

One email, every time we ship

Short notes on new components and breaking changes. No filler.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface NewsletterInlineProps {
  eyebrow?: string;
  title?: string;
  subcopy?: string;
  placeholder?: string;
  buttonLabel?: string;
  successMessage?: string;
  className?: string;
}

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Submitting with an invalid or empty email shows an inline error below the field without disturbing the layout.
→A valid submission cross-fades the input and button out for a single-line success message in the same slot, sized to match.
→No request is ever sent; the short 'submitting' state exists purely to make the state change visible.

Accessibility

✓The email field has a visually hidden `<label>`; the error text is announced via `aria-live="polite"`.
✓The success message has `role="status"` so it's announced the moment it replaces the form.
✓Honours prefers-reduced-motion.