Overview
HomeCta
Render a centered marketing CTA section with an integrated starfield background.
Launch your product surface faster
Drop in a focused CTA section, then connect your own routes, analytics, campaigns, and conversion logic.
Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/home-cta.json"
Usage
<script setup lang="ts">
import { HomeCta, type HomeCtaLink } from '@/components/home-cta'
const links: HomeCtaLink[] = [
{
label: 'Start building',
href: '/signup'
},
{
label: 'Read the docs',
href: '/docs',
variant: 'outline'
}
]
</script>
<template>
<HomeCta
title="Build the next product moment"
description="Use the block for the section layout and CTA rendering. Keep copy, routes, analytics, and campaigns in your app."
:links="links"
/>
</template>App-Owned Marketing
HomeCta owns the centered section layout, starfield background, and CTA button rendering. Your app owns the message, routes, analytics, conversion logic, auth state, campaign state, and any experiment logic around the section.
Pass links as plain data. Use target: '_blank' for external links; the component adds rel="noopener noreferrer" by default unless you provide a custom rel value.
Examples
Default
Launch your product surface faster
Drop in a focused CTA section, then connect your own routes, analytics, campaigns, and conversion logic.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Main CTA headline supplied by your app. |
description | string | — | Supporting CTA copy supplied by your app. |
links | HomeCtaLink[] | [] | CTA links supplied by your app. |
class | string | — | Additional CSS classes for the section. |
Types
interface HomeCtaLink {
label: string
href: string
target?: HTMLAnchorElement['target']
rel?: string
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
}