Is Split Choice CTA free for commercial use?

Yes. Split Choice CTA is MIT licensed, so you can use it in personal and commercial projects without attribution.

Does the component preserve keyboard order on mobile?

Yes. The stackingMode setting changes the actual narrow-screen DOM order rather than applying a visual-only CSS reorder, so reading, visual and Tab order stay aligned.

What happens for touch and reduced-motion visitors?

Both choices remain complete full-panel anchors. Touch opens a destination with one tap, while reduced motion disables divider travel, decoration scaling and arrow movement without removing content or focus treatment.

Split Choice CTA

A free split call to action React section with two equally accessible paths.

Choose how you want to make the next page

Start with focused building blocks or move from a complete foundation. Both routes keep the same design standard and leave the final decision with you.

Build with componentsCompose the experience yourselfBrowse open React sections, effects and interactions, then combine only the pieces your page needs.Build with components Build from a templateStart with the complete systemUse a production-ready Next.js template when you want the layout, motion and responsive details already connected.Build from a template

Customise

Split ratio0.5

Emphasis scale1.025

Spring stiffness340

Stacking order

Divider width2px

Radius30px

Code

<CtaSplitChoice heading={splitChoice.heading} description={splitChoice.description} choices={splitChoice.choices} />

Split Choice CTA is a free split call to action React component for Next.js and Tailwind. It places one neutral decision heading above two complete, full-panel links, giving visitors two clear routes without presenting either route as recommended or secondary.

On wide screens the first-panel ratio is adjustable. On narrow screens the selected stacking order is rendered in the actual DOM, so visual order and keyboard order always agree. Fine-pointer hover and keyboard focus share the same bounded decoration, divider and arrow response, while touch remains a direct one-tap link and reduced motion keeps every surface static.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/cta-split-choice

Usage

import { CtaSplitChoice } from "@/components/cta-split-choice";

const choices = [
  {
    label: "Build with components",
    title: "Compose the experience yourself",
    description: "Choose focused sections and effects for your own page.",
    href: "/components",
  },
  {
    label: "Build from a template",
    title: "Start with the complete system",
    description: "Launch from a connected production-ready foundation.",
    href: "https://templateempire.io",
  },
] as const;

export function Example() {
  return (
    <CtaSplitChoice
      heading="Choose how you want to make the next page"
      description="Both routes keep the same design standard."
      choices={choices}
    />
  );
}

Props

Prop	Type	Default	Description
heading	string	required	Shared decision heading rendered as the section h2.
description	string	required	Neutral supporting copy rendered below the heading.
choices	readonly [Choice, Choice]	required	Exactly two complete real-anchor paths with label, title, description and href.
splitRatio	number	0.5	First-panel wide-screen fraction, clamped from 0.35 to 0.65.
emphasisScale	number	1.025	Temporary active decoration scale, clamped from 1 to 1.06.
springStiffness	number	340	Shared divider spring stiffness, clamped from 140 to 560.
stackingMode	"first-first" \| "second-first"	"first-first"	Actual narrow-screen DOM and visual order.
dividerWidth	number	2	Divider width in CSS pixels, clamped from 1 to 6.
radius	number	30	Outer radius in CSS pixels, clamped from 0 to 52.
className	string	undefined	Additional classes merged onto the labelled section.

Customisation

Split Choice CTA exposes three Tier 3 colour tokens. --split-choice-accent controls the shared divider, focus ring and temporary active detail. --split-choice-first provides the first surface. --split-choice-second provides the second surface and is blended with the card token so foreground contrast remains stable in light, dark and vanilla shadcn themes. Override the tokens on any ancestor:

:root {
  --split-choice-accent: var(--primary);
  --split-choice-first: var(--card);
  --split-choice-second: var(--muted);
}

Frequently asked questions

Is Split Choice CTA free for commercial use?: Yes. Split Choice CTA is MIT licensed, so you can use it in personal and commercial projects without attribution.
Does the component preserve keyboard order on mobile?: Yes. The stackingMode setting changes the actual narrow-screen DOM order rather than applying a visual-only CSS reorder, so reading, visual and Tab order stay aligned.
What happens for touch and reduced-motion visitors?: Both choices remain complete full-panel anchors. Touch opens a destination with one tap, while reduced motion disables divider travel, decoration scaling and arrow movement without removing content or focus treatment.

Related components

Want a complete launch system?Template Empire turns the same component craft into production-ready Next.js templates with connected pages, responsive states and motion.Explore Template Empire templates