shadcn.io is not affiliated with official shadcn/ui
Spotlight Vignette CTA Block for React
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.
Installation
Overview
A call to action for a product reveal, for React with Base UI, that follows your theme. A tinted shell with a + mark on each corner holds a raised panel; three soft cones of light in your text colour shine down on it from above and cross slowly, while a vignette fades the edges into the card so the eye lands in the middle. Over it sit a two-line headline for Halden 2, a made-up deploy platform, one sentence, a Shine Button for the main action, an outline button for the keynote and a status line. It's built from Spotlight, Guides, Shine Button, Button and Status, with the page's own top rule and rails. For launches, keynotes and announcements.
FAQ
How do I change the lights?
Set them on Spotlight: count is 1, 2 or 3 lights, intensity is subtle (here), medium or strong, colors takes up to three CSS colours (here the theme's foreground), and speed is a multiplier for the sweep. interactive adds a light that follows the pointer.
How does the vignette work?
A plain div over the lights with a radial gradient from clear in the middle to --card at the edges, so the edges fade into the card in any theme. Change its stops to fade more or less.
Do the lights move, and can I stop them?
They swing slowly, one swing every 19 to 29 seconds, with CSS transforms only. With reduced motion turned on they hold still. Lower speed to calm them further.
Where do the buttons go?
Both are links (href="#"): point Start deploying at your sign-up and Watch the keynote at your video.
Each button renders the link it's given with render, with nativeButton={false}.
Related
- Pro
Diagonal Accent Beam CTA
Drawn accentsA 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.
- Pro
Starfield Sparse CTA
Drawn accentsA 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
Dot Grid Backdrop CTA
Drawn accentsA 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.
- Pro
Glass Card Hero
BackdropsA compact card-in-card hero on solid rails: a frosted glass panel with a ring over a drifting mesh of your accent's tones, in a hairline frame with + marks, with a Shine Button and an outline button.
- Pro
Centered Gradient Orbs Hero
BackdropsA 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
Graph Grid Paper CTA
Drawn accentsA 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.