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

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

```astro live props={{ name: 'cta-1' }}
---
import CallToActionBlock from "@/components/blocks/cta-1.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<CallToActionBlock
  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",
  }}
/>
```

```astro live props={{ name: 'cta-2' }}
---
import Cta2Block from "@/components/blocks/cta-2.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Cta2Block
  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",
  }}
/>
```

```astro live props={{ name: 'cta-3' }}
---
import Cta3Block from "@/components/blocks/cta-3.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Cta3Block
  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",
  }}
/>
```

```astro live props={{ name: 'cta-4' }}
---
import Cta4Block from "@/components/blocks/cta-4.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Cta4Block
  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",
  }}
/>
```

```astro live props={{ name: 'cta-5' }}
---
import Cta5Block from "@/components/blocks/cta-5.astro"
---

<Cta5Block
  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/" },
  ]}
/>
```

```astro live props={{ name: 'cta-6' }}
---
import Cta6Block from "@/components/blocks/cta-6.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Cta6Block
  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",
  }}
/>
```

```astro live props={{ name: 'cta-7' }}
---
import Cta7Block from "@/components/blocks/cta-7.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Cta7Block
  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",
  }}
/>
```

```astro live props={{ name: 'cta-8' }}
---
import Cta8Block from "@/components/blocks/cta-8.astro"
---

<Cta8Block
  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/" },
  ]}
/>
```

## Installation

```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
```