# Newsletter 1

> newsletter

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/newsletter-1).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/newsletter-1
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/newsletter-1/light.png
- Registry item: https://blocks.cnippet.dev/r/newsletter-1.json
- Categories: newsletter
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/newsletter-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@cnippet/badge`, `@cnippet/button`, `@cnippet/checkbox`, `@cnippet/input`, `@cnippet/label`

## Files

### `registry/default/sections/newsletter-1.tsx`

```tsx
"use client";

import { ArrowRight, Mail, Sparkles } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Component() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
  };

  return (
    <div className="relative w-full bg-linear-to-b from-white to-gray-50 px-4 py-16 md:py-24 dark:from-background dark:to-neutral-900">
      <div className="mx-auto max-w-3xl">
        {/* Badge */}
        <div className="mb-6 flex justify-center">
          <Badge className="flex items-center gap-2 border-none bg-violet-100 px-4 py-1.5 text-violet-700 dark:bg-violet-950 dark:text-violet-300">
            <Sparkles className="h-3.5 w-3.5" />
            Stay Updated
          </Badge>
        </div>

        {/* Heading */}
        <div className="mb-6 text-center">
          <h2 className="mb-4 font-semibold text-3xl text-gray-900 leading-tight md:text-4xl lg:text-5xl dark:text-gray-100">
            Subscribe to our newsletter
          </h2>
          <p className="mx-auto max-w-2xl text-gray-600 text-lg leading-relaxed md:text-xl dark:text-gray-400">
            Get the latest updates, articles, and resources delivered directly
            to your inbox every week.
          </p>
        </div>

        {/* Newsletter Form */}
        <form className="mx-auto max-w-xl" onSubmit={handleSubmit}>
          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:gap-2">
            <div className="relative flex-1">
              <Mail className="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400" />
              <Input
                className="h-12 border-gray-200 py-3 pr-4 pl-11 placeholder:text-gray-400 focus-visible:ring-violet-500 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:placeholder:text-gray-500"
                placeholder="Enter your email address"
                required
                type="email"
              />
            </div>
            <Button
              className="group h-12 bg-violet-600 px-6 font-medium shadow-lg hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700"
              type="submit"
            >
              Subscribe
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>

          {/* Privacy Notice */}
          <div className="flex items-start gap-2">
            <Checkbox
              className="mt-1 border-gray-300 dark:border-neutral-600"
              id="privacy"
            />
            <Label
              className="cursor-pointer text-gray-600 text-sm leading-relaxed dark:text-gray-400"
              htmlFor="privacy"
            >
              I agree to receive marketing emails and accept the{" "}
              <a
                className="text-violet-600 underline hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300"
                href="#"
              >
                privacy policy
              </a>
              .
            </Label>
          </div>
        </form>

        {/* Stats or Social Proof */}
        <div className="mt-12 flex flex-col items-center justify-center gap-6 sm:flex-row sm:gap-8">
          <div className="text-center">
            <p className="font-bold text-2xl text-gray-900 dark:text-gray-100">
              50K+
            </p>
            <p className="text-gray-600 text-sm dark:text-gray-400">
              Subscribers
            </p>
          </div>
          <div className="hidden h-12 w-px bg-gray-200 sm:block dark:bg-neutral-700" />
          <div className="text-center">
            <p className="font-bold text-2xl text-gray-900 dark:text-gray-100">
              Weekly
            </p>
            <p className="text-gray-600 text-sm dark:text-gray-400">Updates</p>
          </div>
          <div className="hidden h-12 w-px bg-gray-200 sm:block dark:bg-neutral-700" />
          <div className="text-center">
            <p className="font-bold text-2xl text-gray-900 dark:text-gray-100">
              No Spam
            </p>
            <p className="text-gray-600 text-sm dark:text-gray-400">
              Unsubscribe anytime
            </p>
          </div>
        </div>
      </div>

      {/* Decorative Elements */}
      <div className="absolute top-0 left-0 -z-10 h-96 w-96 opacity-30 blur-3xl">
        <div className="h-full w-full rounded-full bg-violet-200 dark:bg-violet-950" />
      </div>
      <div className="absolute right-0 bottom-0 -z-10 h-96 w-96 opacity-30 blur-3xl">
        <div className="h-full w-full rounded-full bg-blue-200 dark:bg-blue-950" />
      </div>
    </div>
  );
}
```