shadcn.io is not affiliated with official shadcn/ui
Dot Grid Backdrop CTA Block for Ark UI
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.
Installation
Overview
A call to action on printed dots, for React with Ark UI. A field of halftone dots, big near the edges and shrinking toward the middle, fills the column between the side rails the way newsprint prints a photograph, and a soft clearing keeps the centre calm. Over it sit an outline badge with the runtime version, a one-line statement headline, a sentence with a bold lead, a Shine Button and a ghost link. The column closes on a band of three facts (regions, first byte, cold starts) in cells with shared hairlines; the band's top rule carries plus marks where it meets the rails. It's built from Halftone, Badge, Guides, Shine Button and Button, in your theme's tokens, light or dark. For developer platforms, infrastructure and runtime products.
FAQ
How do I change the dots' size and colour?
Set them on Halftone: dotSize is the grid's spacing in pixels (16 here; 10 is fine print, 20 a graphic look), intensity how big the largest dots get, and dotColor any CSS colour. Here the ink is var(--muted-foreground), so it follows your theme.
How does the field clear behind the copy?
A radial gradient from --background lies over the dots: solid in the middle, fading out toward the edges. It's wider on a phone, where the copy fills the width. The badge and the ghost link carry a bg-background backing so a dot never sits under their text. Edit the gradient's ellipse and stops to clear more or less.
How does the closing band work?
FACTS holds one entry per cell. The cells are a three-column dl with divide-x, and the band's rule is a Guides with the top rule and plus marks, so the lines meet the rails exactly. The value shows above its label through order-*, while the markup keeps the label first, so a screen reader hears the label then the value. Because the band ends the section, the column has no bottom padding.
Do the dots move?
Slowly: the field of light and shade that sizes them drifts, at half the default speed here, using CSS transforms only. With reduced motion turned on the field holds still. Lower speed for less drift.
How do the dots read on a light and a dark page?
The block never forces a scheme. The halftone prints dark dots on a light page and light dots on a dark one (it switches its blend with the theme), and every colour comes from your theme's tokens.
Is it accessible for screen readers?
The dot field and its clearing are decoration, hidden from assistive technology. The page gets one h2, the badge is plain text, both calls to action are links named by their text and the facts are a description list. Text is measured against the rendered pixels in every preset. Values such as the first-byte time are wrapped in bdi so they keep their order in right-to-left layouts.