Call to action Blocks for Shadcn and Vue
Centered call to action
<script setup lang="ts">
import { Button } from '@/components/ui/vue/button'
interface Props {
headline?: string
subline?: string
primaryAction?: { text: string, href: string }
secondaryAction?: { text: string, href: string }
}
withDefaults(defineProps<Props>(), {
headline: 'Ready to Get Started?',
subline: 'Join thousands of teams building better products today. No credit card required.',
primaryAction: () => ({ text: 'Start Free Trial', href: '#' }),
secondaryAction: () => ({ text: 'View Demo', href: '#' }),
})
</script>
<template>
<section class="w-full py-10 md:py-14 bg-muted">
<div class="container mx-auto flex flex-col items-center px-4 text-center md:px-6">
<h2 class="text-2xl font-bold sm:text-3xl md:text-4xl">
{{ headline }}
</h2>
<p class="mt-3 max-w-2xl text-sm text-muted-foreground md:mt-4 md:text-base">
{{ subline }}
</p>
<div class="mt-6 flex gap-3">
<Button as="a" :href="primaryAction.href" class="px-5 py-2 text-sm">
{{ primaryAction.text }}
</Button>
<Button as="a" :href="secondaryAction.href" variant="outline" class="px-5 py-2 text-sm">
{{ secondaryAction.text }}
</Button>
</div>
</div>
</section>
</template> Block details
This CTA section implements Shadcn Vue Button components to create an action-oriented layout with main and alternative choices. The design centers a bold headline with descriptive text, offering users both primary and secondary interactive paths through styled buttons.
| Dependency | Source |
|---|---|
| Button (shadcn-vue) | Registry |
Subscribe section
<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/ui/vue/button'
import { Input } from '@/components/ui/vue/input'
interface Props {
headline?: string
subline?: string
buttonText?: string
}
withDefaults(defineProps<Props>(), {
headline: 'Stay in the loop',
subline: 'Get updates on new features, releases, and more.',
buttonText: 'Subscribe',
})
const email = ref('')
function handleSubmit() {
console.log('Subscribe:', email.value)
email.value = ''
}
</script>
<template>
<section class="w-full py-10">
<div class="container mx-auto flex flex-col gap-6 px-4 md:flex-row md:items-center md:justify-between md:px-6">
<div class="max-w-md">
<h2 class="text-2xl font-bold tracking-tight sm:text-3xl">
{{ headline }}
</h2>
<p class="mt-2 text-sm text-muted-foreground md:mt-3">
{{ subline }}
</p>
</div>
<form class="flex w-full max-w-sm gap-2 md:w-auto" @submit.prevent="handleSubmit">
<Input
v-model="email"
type="email"
placeholder="Enter your email"
required
class="flex-1"
/>
<Button type="submit" class="px-4 py-2 text-sm">
{{ buttonText }}
</Button>
</form>
</div>
</section>
</template> Block details
A compact sign-up strip built with shadcn-vue Input and Button components, and Tailwind flex utilities that slots neatly into any page. The headline and subline set the tone, while a controlled email ref and submit handler give you a ready-to-wire newsletter form without extra dependencies.
| Dependency | Source |
|---|---|
| Vue | NPM |
| Button (shadcn-vue) | Registry |
| Input (shadcn-vue) | Registry |
Frequently asked questions
Are the call to action blocks free to use?
Yes. All our call to action blocks are free to use in personal and commercial projects.
How do I use these call to action blocks in my project?
Simply browse our collection, click on the "Copy Code" button for your chosen block, and paste it into your Shadcn Vue project. All components are built with Tailwind CSS and shadcn Vue, so they'll work seamlessly with your existing setup.
Can I customize the call to action blocks?
Absolutely! All our call to action blocks are fully customizable. You can easily modify colors, spacing, typography, and layout by adjusting the Tailwind CSS classes in the component code.