Shadcn.io is not affiliated with official shadcn/ui
CTA Centered Dark Noise Grain Texture
A centered dark CTA section for React and Next.js with an inline SVG fractal noise grain texture overlay, editorial-scale headline, eyebrow label, and single inverted primary ShadcnioButton built with shadcn/ui and Tailwind CSS
Close visitors with this centered dark CTA wrapped in an inline SVG noise grain texture overlay for React and Next.js. Features a subtle fractalNoise filter rendered as a decorative full-inset layer with mix-blend-overlay, an editorial-scale headline on bg-foreground, a muted eyebrow label, and a single confident inverted primary ShadcnioButton paired with a plain text link. Built with TypeScript, ShadcnioButton from shadcn/ui, motion/react entrance animations, and Tailwind CSS. Perfect for editorial announcements, brand refreshes, long-form landing pages, and any section where a tactile film-grain texture signals craft and intent.
Related Components
Centered Dark CTA with Dot Grid Backdrop
Centered dark CTA with a structured dot grid backdrop
Centered Dark CTA with Diagonal Accent Beam
Centered dark CTA with a diagonal beam accent
Centered Dark CTA with Dual Action
Centered dark CTA with paired primary and ghost buttons
Centered Dark CTA with Icon Accent
Dark centered CTA with an accent icon above the headline
Centered Dark CTA with Metadata Tagline
Dark centered CTA with a metadata-style tagline
Centered Dark CTA with Testimonial Quote
Dark centered CTA backed by a single testimonial quote
FAQ
Was this page helpful?
Sign in to leave feedback.
Centered Dark Metric Cluster
A centered dark CTA section for React and Next.js with large metric cluster (icon tile plus oversized tabular number), announcement badge, headline, and inverted primary ShadcnioButton built with shadcn/ui and Tailwind CSS
Centered Dark Number With Stats
A centered dark CTA for React and Next.js with oversized anchor number, three-stat support row, inverted ShadcnioButton, and uppercase kicker, built with shadcn/ui and Tailwind CSS