CTA section
A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.
npm install https://animui.stracture.net/__local/package.tgz- The last section of a landing page, asking for a trial or demo.
- An in-page prompt beside a product visual that shows the outcome.
- A slim promotional banner above content.
- The first screen of a page. Use Hero section.
- Collecting an email. Use Newsletter signup.
- A persistent site-wide notice. Use Announcement bar.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { CtaSection } from 'animui/cta-section';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this to ask for a trial, demo or signup. Pass href or onClick to each action; edit sample copy in cta-section-data.ts. Buttons in the preview confirm in place.
import { CtaSection } from "animui/cta-section"; export function Closing() { return ( <CtaSection variant="split" title="Your team, set up before lunch" primaryAction={{ label: "Create a workspace", href: "/signup" }} secondaryAction={{ label: "Book a demo", href: "/demo" }} points={["Import from any tracker", "SSO included", "Cancel anytime"]} /> );}CtaSection
A call to action in three shapes chosen by variant: a centered closing section, a split layout beside a product visual, and a compact dismissible banner.
variant"centered" | "split" | "banner""centered"centered closes a page, split sits beside a setup card that completes itself, banner is one line with an action.titlestring–Heading. Each variant has sample copy.descriptionstring–One sentence under the heading.primaryActionCtaAction–{ label, href?, onClick?, confirmedLabel? }. With href it renders a link; with neither href nor onClick it confirms in place.secondaryActionCtaAction | null–Second action in centered and split. Pass null to hide it.notestring"No credit card required"Small print under the actions in centered.facesstring[]–Up to four avatar URLs beside the note in centered. Pass [] to hide them.pointsstring[]–Benefit lines with checks in split.visualReactNode–Replaces the split variant's setup card, for your own screenshot or component.onDismiss() => void–Banner only. Shows the dismiss button and is called after the banner has closed.classNamestring–Extra class on the section.- Tab
- Moves through the actions, then the dismiss button in the banner.
- EnterorSpace
- Runs an action or dismisses the banner.
- Each variant is a section labelled by its heading.
- Actions with href are real links; others are buttons. Simulated confirmations announce politely.
- The dismiss button has the name "Dismiss"; the banner closes its gap so focus order stays clean.
- The setup card is aria-hidden: the copy beside it carries the message.
- Primary actions lean their arrow forward on hover; buttons press to .97 and morph their width when the label changes.
- Split: the stage rises into view once, then the setup card ticks its three steps, fills its progress line, and slides in teammates' faces.
- Banner: dismissing fades it, scales it to .98, and springs its height closed so the page below moves up smoothly.
- Reduced motion shows the finished setup card and removes travel.
- Split stacks copy above the visual below 860px container width.
- Below 560px actions go full width and stack, and the banner puts its text above the action and dismiss button.
- Headings scale with the container between 30px and 52px.
- The setup card runs three timers once after it enters view; everything else is CSS transitions.
- No images except up to four small avatars.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use centered at the end of a landing page, split mid page next to a relevant product state, and banner at the top of an app or docs page.
- Pass href for real navigation. Leave both href and onClick out only for previews.
- One primary and at most one secondary action. Keep labels to two or three words with a verb.
- Edit cta-section-data.ts for the sample copy and the setup card content.
The full library index for assistants is at /llms.txt.
