Call to action Blocks for Shadcn and React
Centered call to action
import { Button } from '@/components/ui/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 relative overflow-hidden">
<div className="absolute inset-0 bg-primary/10" />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[600px] bg-primary/20 blur-[100px] rounded-full pointer-events-none" />
<div className="relative z-10 max-w-4xl mx-auto text-center px-4">
<h2 className="font-bold text-3xl md:text-4xl">{headline}</h2>
<p className="mt-4 text-sm text-muted-foreground md:text-base">
{subline}
</p>
<div className="mt-6 flex flex-col sm:flex-row justify-center gap-4">
<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.
| Dependency | Source |
|---|---|
| Button (shadcn) | Registry |
Subscribe section
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
interface Props {
headline?: string
subline?: string
buttonText?: string
}
export default function NewsletterSection({
headline = 'Stay in the loop',
subline = 'Get updates on new features, releases, and more.',
buttonText = 'Subscribe',
}: Props) {
function handleSubmit(e: React.FormEvent) {
e.preventDefault()
}
return (
<section className="w-full py-10">
<div className="container mx-auto flex flex-col gap-6 px-4 md:flex-row md:items-center md:justify-between md:px-6">
<div className="max-w-md">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">{headline}</h2>
<p className="mt-2 text-sm text-muted-foreground md:mt-3">{subline}</p>
</div>
<form className="flex w-full max-w-sm gap-2 md:w-auto" onSubmit={handleSubmit}>
<Input
type="email"
placeholder="Enter your email"
required
className="flex-1"
/>
<Button type="submit" className="px-4 py-2 text-sm">
{buttonText}
</Button>
</form>
</div>
</section>
)
} Block details
The block pairs shadcn Input and Button with a controlled form to capture emails in a single line. Tailwind’s responsive flex layout stacks on mobile and aligns horizontally on wider screens, giving a crisp call-to-action that drops straight into any page.
| Dependency | Source |
|---|---|
| React | NPM |
| Button (shadcn) | Registry |
| Input (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.