shadcn.io is not affiliated with official shadcn/ui
Starfield Sparse CTA Block for React
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.
Installation
Overview
A closing section with a constellation that leads to the button, for React with Base UI. It has no card: the sky fills the page column between its rails. The stars and the line take your text colour, so they are light dots on a dark page and dark dots on a light one. A few stars twinkle, and a dashed line joins the stars across the top and down the end side, drawing itself once on load until it lands just above the Shine Button. In the middle sit a two-line headline for Nightjar 3, a made-up sleep tracker, one sentence, the Shine Button and an outline button for what's new. It's built from Guides, Shine Button and Button, with plain CSS and SVG for the sky. For launch nights and any closing section that wants a quiet, starry feel.
FAQ
How is the constellation line drawn?
It is one SVG path with a dashed stroke that stays a fixed width at any size. A CSS clip-path transition reveals it from the top down once on load, with no script. Stars sit on its vertices in percent, so they stay on the line at any width. With reduced motion the line is simply there.
How does the line end above the button?
The line's layer stops a fixed distance above the foot of the copy, set in one CSS variable (--cta), so its last point lands just above the buttons. If you change the buttons' size or the spacing, adjust that variable.
How do I change the stars?
Edit the SKY, ROUTE and STRIP lists at the top of the file: each star has a position as a percentage, a size, a tone and an optional twinkle class. Twinkling uses animate-pulse, which stops with reduced motion.
What happens on a phone?
The wide sky and the line would cross the copy on a narrow screen, so below md the block shows a short strip of stars above the headline instead, and the copy and buttons stack.
Do the stars keep moving?
Only a few of them pulse softly, and the sky is decoration. With reduced motion turned on nothing pulses and the line doesn't animate.
Related
- Pro
Spotlight Vignette CTA
Drawn accentsA 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
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
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.
- Pro
Starfield Backdrop Hero
BackdropsA compact centred hero flying slowly through a field of stars on a framed stage: a live launch pill, a headline, a Shine Button to the waitlist, a quiet second link and the waitlist's size.
- 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
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.