# Cta 1

> Centered CTA block with radial glow background

A shadcn/ui block from the [@smoothui](https://smoothui.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/smoothui/cta-1).

- Page, with a live preview: https://shadcn.exchange/r/smoothui/cta-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/smoothui/cta-1-light-39db0713507b2bdb.png
- Registry item: https://smoothui.dev/r/cta-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://smoothui.dev/r/cta-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: `motion`
- Registry items: `https://smoothui.dev/r/smooth-button.json`

## Files

### `index.tsx`

```tsx
"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { motion, useReducedMotion } from "motion/react";

const SPRING = {
  bounce: 0.1,
  duration: 0.25,
  type: "spring" as const,
};

export function CtaCentered() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <section aria-labelledby="cta-centered-heading">
      <div className="relative overflow-hidden bg-muted/50 py-24 md:py-32">
        <div
          aria-hidden="true"
          className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-primary)/0.08,transparent_70%)]"
        />
        <motion.div
          className="relative mx-auto max-w-3xl px-6 text-center"
          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 24 }}
          transition={
            shouldReduceMotion
              ? { duration: 0 }
              : { ...SPRING, staggerChildren: 0.08 }
          }
          viewport={{ once: true }}
          whileInView={
            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
          }
        >
          <h2
            className="text-balance font-bold text-3xl tracking-tight md:text-4xl lg:text-5xl"
            id="cta-centered-heading"
          >
            Ready to build something amazing?
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-balance text-foreground/70 text-lg">
            Start building with beautifully animated components today. Free,
            open source, and ready for production.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
            <SmoothButton size="lg" variant="candy">
              Get Started
            </SmoothButton>
            <SmoothButton size="lg" variant="outline">
              Learn More
            </SmoothButton>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

export default CtaCentered;
```