Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Noise Grain Texture CTA Block for Radix UI

A reverse split call to action for an essay series: the magazine cover drawn on film grain in a hairline frame beside a serif headline, a lede with a drop cap, a byline, a Shine Button and an archive link.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A call to action set like a magazine page, for React with Radix UI. On the start side a framed cover for The Quiet Release, No. 07, sits on fine film grain in your theme's own colours, felt more than seen, with a serif title and a three-line contents list. A hairline divider separates it from the teaser on the end side: a quiet badge naming the essay series, a serif headline, a lede that opens with a drop cap that inks in on load, a byline, a Shine Button to read the essay and a ghost button to browse the archive. It's built from Grain, Drop Cap Text, Badge, Guides, Shine Button and Button. For editorial products, newsletters, essays and any closing section that wants a printed, human feel.

FAQ

How do I make the grain stronger or quieter?

Set intensity on Grain to subtle, medium (here) or strong, and speed for how fast it re-rolls. grainColor takes any CSS colour and defaults to your theme's foreground. Text on grain should use the full foreground colour: muted text loses contrast against the specks.

How does the drop cap work?

DropCapText sets the paragraph's own first letter as a large initial sunk three lines into the text, so the sentence stays whole for screen readers and copying. It inks in once on load (trigger="mount"), and with reduced motion it is simply there. capColor, lines and duration change it.

How is the cover placed before the text in a reverse split?

The teaser comes first in the page, so reading order and focus start with the headline and the buttons. The cover is the second grid child and takes lg:col-start-1 lg:row-start-1, which puts it on the start side from lg. Below lg the teaser comes first and the cover follows under a rule. The cover is decoration, hidden from assistive technology.

Does the grain flicker, and can I stop it?

It re-rolls in steps, softly, with CSS only. With reduced motion turned on it holds still. It is measured against the rendered pixels in every preset.

Which serif is it set in?

font-serif, which is your theme's serif stack, or the system serif if it has none. Set --font-serif to use a typeface of your own.

Does it work right to left?

Yes. The columns swap sides with the page direction, the paragraph sets its direction from its text, the drop cap moves to the correct side with it, and the byline's number is wrapped so it keeps its place.

All 100 cta blocks