Call to action Blocks and Components for Shadcn Vue
Centered call to action
Free<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.
Block dependencies
| Dependency | Source |
|---|---|
| Button (shadcn-vue) | Registry |
Frequently asked questions
Are the call to action blocks free to use?
We offer both free and premium call to action blocks. The free blocks are completely free to use in personal and commercial projects. Premium blocks require a one-time purchase for access to more advanced designs.
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 & 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.