Sections

Cta

The closing ask.

Server safeSource

Import

import { CTA } from '@the_viveksingh/vivek-ui'

A closing call to action

Hero without the media slot: the band that ends a landing page.

Ready to try it?

One npm install and one stylesheet import is the whole setup.

<CTA
  title="Ready to try it?"
  description="One npm install and one stylesheet import is the whole setup."
  actions={
    <Stack direction="horizontal" gap={3} wrap justify="center">
      <Button>Get started</Button>
      <Button variant="ghost">Star on GitHub</Button>
    </Stack>
  }
/>

On the brand colour

variant="primary" flips the whole band, including the text and border tokens, so contrast holds without you restating colours.

Open source

Ship your next interface this week

Install once, style with tokens, override with a single class.

<CTA
  background="primary"
  eyebrow="Open source"
  title="Ship your next interface this week"
  description="Install once, style with tokens, override with a single class."
  actions={<Button background="outline">Read the docs</Button>}
/>

Inset card, actions beside the copy

inset paints the tone on a rounded card inside the container instead of a full-bleed band, which sits better between two white sections. layout="split" puts the actions beside the copy on wide screens whatever the alignment.

Ready to try it?

One npm install and one stylesheet import is the whole setup.

<CTA
  inset
  layout="split"
  background="primary"
  title="Ready when you are"
  description="Install the package and import the stylesheet. There is no step three."
  actions={<Button size="lg" variant="outline">Get started</Button>}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for CTA
Prop	Type	Default	Description
`eyebrow`	`ReactNode`	—	A plain string becomes a pill `Badge`; a node is rendered as given.
`title`	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`actions`	`ReactNode`	—	Usually one or two `Button`s. Laid out in a row that wraps.
`background`	`'default' \| 'muted' \| 'primary'`	—	Surface treatment, forwarded to the underlying `Section`. Named `background` because that is exactly what it is — `variant` implied a structural difference that never existed, and Section already calls this vocabulary `background`.
`inset`	`boolean`	—	Paint the background on a rounded card inside the container instead of a full-bleed band.
`layout`	`'stack' \| 'split'`	—	`split` puts the actions beside the copy on wide screens whatever the alignment. Default `stack`.
`headingLevel`	`HeadingLevel`	—	Level of `title`. Defaults to `2`.

Rendering

Server safe

CTA carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.