---
type: block
title: Cta
description: Call-to-action sections that close pages, bridge sections, or reinforce a launch moment.
---

> Fulldev UI for React. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/react/styles/{style}/{name}.json`; see [installation](/react/docs/installation.md).

## Cta 1

```tsx title="Usage of @fulldev/cta-1 (react/gallery/blocks/cta-1.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Cta1 } from "@/components/blocks/cta-1"

const placeholderImage = placeholder.src

export default function Cta1Demo() {
  return (
    <>
      <Cta1
        title="Give every launch page a decisive close"
        description="Use a centered CTA when the rest of the page already did the explaining and the final section needs one clear invitation."
        buttons={[
          { label: "Start project", href: "/docs/" },
          { label: "Browse components", href: "/components/" },
        ]}
        socialProof={{
          avatars: [
            { image: placeholderImage, initials: "SV" },
            { image: placeholderImage, initials: "JD" },
            { image: placeholderImage, initials: "MK" },
            { image: placeholderImage, initials: "AR" },
          ],
          rating: 4.8,
          ratingLabel: "Rated 4.8 out of 5",
          text: "Example: 4.8 from 120 reviews",
        }}
      />
    </>
  )
}
```

## Cta 2

```tsx title="Usage of @fulldev/cta-2 (react/gallery/blocks/cta-2.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Cta2 } from "@/components/blocks/cta-2"

const placeholderImage = placeholder.src

export default function Cta2Demo() {
  return (
    <>
      <Cta2
        title="Turn your component inventory into complete pages"
        description="A split CTA works well when the message needs a little more narrative and the actions should stay visually distinct."
        buttons={[
          { label: "See block library", href: "/blocks/" },
          { label: "Install primitives", href: "/docs/installation/" },
        ]}
        socialProof={{
          avatars: [
            { image: placeholderImage, initials: "SV" },
            { image: placeholderImage, initials: "JD" },
            { image: placeholderImage, initials: "MK" },
          ],
          rating: 4.8,
          ratingLabel: "Rated 4.8 out of 5",
          text: "Example: 4.8 from 120 reviews",
        }}
      />
    </>
  )
}
```

## Cta 3

```tsx title="Usage of @fulldev/cta-3 (react/gallery/blocks/cta-3.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Cta3 } from "@/components/blocks/cta-3"

const placeholderImage = placeholder.src

export default function Cta3Demo() {
  return (
    <>
      <Cta3
        title="Build one block language for docs and marketing"
        description="This spread CTA is useful at the end of feature sections or product comparisons where the surface should feel contained yet spacious."
        buttons={[
          { label: "Use Section", href: "/components/section/" },
          { label: "Inspect Card", href: "/components/card/" },
        ]}
        socialProof={{
          avatars: [
            { image: placeholderImage, initials: "SV" },
            { image: placeholderImage, initials: "JD" },
            { image: placeholderImage, initials: "MK" },
            { image: placeholderImage, initials: "AR" },
          ],
          rating: 4.8,
          ratingLabel: "Rated 4.8 out of 5",
          text: "Example: 4.8 from 120 reviews",
        }}
      />
    </>
  )
}
```

## Cta 4

```tsx title="Usage of @fulldev/cta-4 (react/gallery/blocks/cta-4.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Cta4 } from "@/components/blocks/cta-4"

const placeholderImage = placeholder.src

export default function Cta4Demo() {
  return (
    <>
      <Cta4
        title="Move from isolated examples to reusable page sections"
        description="A background-image CTA helps the final section feel like a real destination instead of just another block in the stack."
        buttons={[
          { label: "Explore blocks", href: "/blocks/" },
          { label: "Button API", href: "/components/button/" },
        ]}
        socialProof={{
          avatars: [
            { image: placeholderImage, initials: "SV" },
            { image: placeholderImage, initials: "JD" },
            { image: placeholderImage, initials: "MK" },
          ],
          rating: 4.8,
          ratingLabel: "Rated 4.8 out of 5",
          text: "Example: 4.8 from 120 reviews",
        }}
      />
    </>
  )
}
```

## Cta 5

```tsx title="Usage of @fulldev/cta-5 (react/gallery/blocks/cta-5.tsx, not installed)"
import { Cta5 } from "@/components/blocks/cta-5"

export default function Cta5Demo() {
  return (
    <>
      <Cta5
        title="A CTA with supporting proof points"
        description="Great for pages that need a little more reassurance before the final decision. The checklist reinforces the value proposition."
        features={[
          "Reusable hero sections",
          "Editorial article layouts",
          "Contact and pricing flows",
        ]}
        buttons={[
          { label: "Read the docs", href: "/docs/" },
          { label: "Feature examples", href: "/blocks/features/" },
        ]}
      />
    </>
  )
}
```

## Cta 6

```tsx title="Usage of @fulldev/cta-6 (react/gallery/blocks/cta-6.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Cta6 } from "@/components/blocks/cta-6"

const placeholderImage = placeholder.src

export default function Cta6Demo() {
  return (
    <>
      <Cta6
        title="A reversed layout for visual variety"
        description="Use this version when the page needs a different rhythm. The image leads, giving the text a supporting role."
        buttons={[
          { label: "Browse blocks", href: "/blocks/" },
          { label: "Component docs", href: "/components/" },
        ]}
        socialProof={{
          avatars: [
            { image: placeholderImage, initials: "SV" },
            { image: placeholderImage, initials: "JD" },
            { image: placeholderImage, initials: "MK" },
          ],
          rating: 4.8,
          ratingLabel: "Rated 4.8 out of 5",
          text: "Example: 4.8 from 120 reviews",
        }}
      />
    </>
  )
}
```

## Cta 7

```tsx title="Usage of @fulldev/cta-7 (react/gallery/blocks/cta-7.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Cta7 } from "@/components/blocks/cta-7"

const placeholderImage = placeholder.src

export default function Cta7Demo() {
  return (
    <>
      <Cta7
        title="Create launch sections everyone can reuse"
        description="This centered CTA with a tinted background works when the section needs to feel distinct from the surrounding content without being too bold."
        buttons={[
          { label: "Layout docs", href: "/components/layout/" },
          { label: "Sidebar docs", href: "/components/sidebar/" },
        ]}
        socialProof={{
          avatars: [
            { image: placeholderImage, initials: "SV" },
            { image: placeholderImage, initials: "JD" },
            { image: placeholderImage, initials: "MK" },
            { image: placeholderImage, initials: "AR" },
          ],
          count: "+120",
          text: "Example: join 120 customers",
        }}
      />
    </>
  )
}
```

## Cta 8

```tsx title="Usage of @fulldev/cta-8 (react/gallery/blocks/cta-8.tsx, not installed)"
import { Cta8 } from "@/components/blocks/cta-8"

export default function Cta8Demo() {
  return (
    <>
      <Cta8
        title="Choose a CTA pattern that matches the weight of the decision"
        description="Some pages need a bold final section. Others only need a quiet nudge. This minimal version with a subtle glow works for the latter."
        buttons={[
          { label: "Hero variants", href: "/blocks/hero/" },
          { label: "Pricing variants", href: "/blocks/pricing/" },
        ]}
      />
    </>
  )
}
```

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/cta-1 @fulldev/cta-2 @fulldev/cta-3 @fulldev/cta-4 @fulldev/cta-5 @fulldev/cta-6 @fulldev/cta-7 @fulldev/cta-8
```