Call to action Blocks and Components for Shadcn React
Centered call to action
Freeimport { Button } from '@/components/ui/react/button'
interface Props {
headline?: string
subline?: string
primaryAction?: { text: string, href: string }
secondaryAction?: { text: string, href: string }
}
export default function CtaSection({
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: '#' },
}: Props) {
return (
<section className="w-full py-10 md:py-14 bg-muted">
<div className="container mx-auto flex flex-col items-center px-4 text-center md:px-6">
<h2 className="text-2xl font-bold sm:text-3xl md:text-4xl">{headline}</h2>
<p className="mt-3 max-w-2xl text-sm text-muted-foreground md:mt-4 md:text-base">
{subline}
</p>
<div className="mt-6 flex gap-3">
<Button asChild className="px-5 py-2 text-sm">
<a href={primaryAction.href}>{primaryAction.text}</a>
</Button>
<Button variant="outline" asChild className="px-5 py-2 text-sm">
<a href={secondaryAction.href}>{secondaryAction.text}</a>
</Button>
</div>
</div>
</section>
)
} Block details
This simple Call to Action (CTA) section uses Shadcn Button components to present a clear call-to-action with primary and secondary options. The centered layout features a prominent headline with supporting text, encouraging user engagement through two distinct button styles.
Block dependencies
| Dependency | Source |
|---|---|
| Button (shadcn) | 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 React project. All components are built with Tailwind CSS & Shadcn React, 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.