Design KitComponentv0.3.0

NBCTA

CTA block with eyebrow + primary/secondary actions.

All componentsKit overviewContact

When to use

Use at decision points: after benefits, before pricing, at the end of pages.

Import

Import
tsx
import NBCTA from "@/components/NBCTA";

Example

Example
tsx
import NBCTA from "@/components/NBCTA";

<NBCTA
  eyebrow="Design kit"
  title="Ship bold UI"
  description="One primary action, one secondary action."
  primary={{ label: "Open docs", href: "/design-kit" }}
  secondary={{ label: "Contact", href: "/contact" }}
  accent="lavender"
/>

Live preview

Preview

Join out beta

Click below to open.

Contact Us

People also ask

Where do I import NBCTA from?

Use: import NBCTA from "@/components/NBCTA";

How do I keep it multi-domain safe?

Don’t hardcode domains in metadata/JSON-LD. Use getSiteUrl() + toAbsoluteUrl().

Design kit

Turn this into a sellable export

If you want the “packaged kit” (versioning, license, exportable docs and components), we can scope the release pipeline.

ContactAll components