Centered

A centered call to action that closes the page: heading and supporting text over a primary and a secondary action, inside a bordered box. The actions stack full width on mobile and sit in a row from the small breakpoint.

Dependencies

@radix-ui/react-slotclass-variance-authority@hugeicons/react@hugeicons/core-free-icons

Interaction Type

A labelled section landmark: the heading names it for screen readers. Tab moves through the actions in reading order, each with the accent focus ring and a 44px target. Hover or focus the primary action and its arrow slides forward; reduced motion keeps it still.

Props

Options you can pass to customize this component.

Prop

Type

Description

title

ReactNode

Heading. Defaults to "Start building with Nexvyn UI".

description

ReactNode

Supporting text under the heading.

className

string

Merged onto the section with cn().

primaryLabel

string

Primary action text. Defaults to "Browse components". Empty hides it.

primaryHref

string

Where the primary action points.

primaryIcon

ReactNode

Icon after the primary label, slides forward on hover. Pass null to hide it.

secondaryLabel

string

Secondary action text. Defaults to "Set up MCP". Empty hides it.

secondaryHref

string

Where the secondary action points.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/cta-centered.json

How to use

<CtaCentered
  title="Ship the next screen today."
  description="Accessible, typed components you own."
  primaryLabel="Get started"
  primaryHref="/components"
  secondaryLabel="Read the docs"
  secondaryHref="/docs"
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

acme.app

Start building with Nexvyn UI

Accessible, typed components you copy into your project and own. Install one, shape it with your tokens, ship it today.

Browse components Set up MCP

npx shadcn@latest addhttps://ui.nexvyn.dev/r/cta-centered.json