Components

Call to action

A call to action for your product, usually the last block, with a link into your site.

Call to action block

The block

As the API returns it, from the example article:

json

{  "type": "cta",  "heading": "Let the articles write themselves",  "body": "We research, write, cite, and publish articles like this one, then rewrite the ones that lose clicks.",  "buttonLabel": "Get your first articles",  "buttonHref": "https://seoforsaas.dev",  "id": "cta-18"}

Replace it

Pass your own component for the type. It receives the block, typed, and every other type keeps its default. The default stays available, so you can wrap it instead of starting over:

tsx

import { Article, defaultComponents } from "@/components/seoforsaas/article";import type { CtaBlock } from "@/lib/seoforsaas/types";const DefaultCta = defaultComponents.cta;function MyCta({ block }: { block: CtaBlock }) {  return (    <div className="my-cta">      <DefaultCta block={block} />    </div>  );}<Article blocks={article.blocks} components={{ cta: MyCta }} />

Notes

The block you're most likely to restyle. Replace it with your own button or signup form through components.cta.