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
  variant="primary"
  eyebrow="Open source"
  title="Ship your next interface this week"
  description="Install once, style with tokens, override with a single class."
  actions={<Button variant="outline">Read the docs</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.
`variant`	`'default' \| 'muted' \| 'primary'`	—	Surface treatment. `primary` re-points the palette for the whole block.
`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.