Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Diagonal Accent Beam CTA Block for React

A split call to action for a release week: the headline and two buttons beside a hairline-framed figure where thin diagonal beams of light sweep behind a card listing the week's launches, between solid rails, in your theme.

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 for launch moments, for React with Base UI. It sits between the page's solid side rails under a top rule. The copy is on the start side: a two-line headline, a sentence with a bold lead, a Shine Button to the release notes and a ghost link to the changelog. On the end side, a solid divider that meets the top rule leads to a figure framed by hairlines with a plus mark on each corner. Inside it, thin curved beams of light draw themselves diagonally behind a small card for "Tarn 3.0" with a live status dot and the week's four launches, Monday to Thursday. Below lg the figure stacks under the text, so the buttons stay on the first screen of a phone. It's built from Beams, Guides, Shine Button, Button and Status, with the theme's own tokens for every colour. For launch weeks, version releases and changelog footers.

FAQ

How do I change the beams' colours and speed?

Set them on Beams. colors takes up to three CSS colours for the gradient's start, middle and end; here they are --muted-foreground and --foreground, so the beams follow any preset and the one accent colour stays on the button. speed is a multiplier: each beam takes 4 to 7.2 seconds at 1, and this block runs at 0.6. A radial mask fades them out toward the figure's edges.

Do the beams run forever, and can I stop them?

They loop, slowly, and carry no information. With reduced motion turned on in the system the beams stop where they are and the figure shows a still pattern. For no beams at all, remove the Beams layer; the card and the copy don't depend on it. The beams are CSS transforms and opacity, so they run no script in the browser.

How are the lines drawn?

The spine is a Guides with the top rule and plus marks, bleeding to the viewport edges. The divider is the figure cell's start border, with a second Guides that puts a mark where it meets the top rule; below lg that one is replaced by a rule between the stacked parts. The frame is another Guides with extend="sm" and marks="corners" around the figure. Every line is solid.

How does the block follow the theme?

Nothing forces a scheme: the card is bg-card, the copy uses text-foreground and text-muted-foreground, and the beams use theme tokens, so it's light in a light theme and dark in a dark one. The Shine Button is the only primary control.

Does it work right to left?

Yes. The copy aligns to the inline start and the divider is a start border, so the whole layout mirrors: the figure moves to the other side, and the plus marks follow the corners.

Is it accessible for screen readers?

The figure is decorative: it's hidden from assistive technology and never takes a click, and the launch list in it is not the block's content. The page gets one h2, and both calls to action are links named by their text.

  • Pro

    Spotlight Vignette CTA

    Drawn accents

    A card-in-card call to action lit like a stage, with slow spotlight cones from above and a vignette that fades the edges into a raised panel that follows your theme, over a two-line headline, a Shine Button and a quiet second action.

  • Pro

    Graph Grid Paper CTA

    Drawn accents

    A statement call to action on graph paper: the page column is the sheet, with a staircase of filled cells rising from one corner, a Shine Button, a ghost link, and a closing band with the version, the install command and the licence.

  • Pro

    Starfield Sparse CTA

    Drawn accents

    A statement call to action under a sparse sky that spans the whole page column, with stars in your text colour, a few twinkling, and a dashed constellation that draws itself down to the Shine Button.

  • Pro

    Perspective Grid Hero

    Backdrops

    A showcase hero for a browser racing engine: one panel between solid page rails where a perspective floor grid rolls toward you under a beta pill, a headline, a Shine Button and an outline button.

  • Pro

    Centered Gradient Orbs Hero

    Backdrops

    A split hero between solid rails: a headline with a Shine Button and an outline button on one side, and on the other a framed panel where soft orbs of the theme's foreground drift slowly behind three stats.

  • Pro

    Dot Grid Backdrop CTA

    Drawn accents

    A centred call to action between solid rails over a halftone dot field that clears behind the copy, with a version badge, the Shine Button, a ghost link and a closing band of three facts in your theme.

All 100 cta blocks