shadcn.io is not affiliated with official shadcn/ui
Left Right CTA with Live Status Pill Block for React
A band call to action between solid rails: a headline, a sentence and a pulsing status pill that opens a popover of four services, with the Shine Button and an outline action at the end.
Installation
Overview
A reliability call to action for React with Base UI, for a messaging API called Relay. The column itself is the band, so only the page rails and the top rule draw it. The start side promises "99.99% uptime, guaranteed" and, under the copy, shows a live status pill: a pulsing dot and "All systems operational" on a button that opens a popover listing four services, each with its own dot and state. The Shine Button "Start free trial" and an outline "Read the SLA" sit at the end. It's built from Popover, Status Pulse Text, Status, Guides, Shine Button and Button with your theme's tokens, so it's light on a light page and dark on a dark one. Use it for infrastructure and API products, where showing the status is more convincing than claiming it.
FAQ
How do I change the services and their state?
Edit SERVICES at the top of the file: a name and a health for each, one of operational, degraded or down. The pill is worked out from them: while every service is operational it says "All systems operational" with a green dot, and as soon as one isn't it says "Some systems degraded" with an amber one. Each row in the popover has its own dot and its state in words, so colour never says it alone.
Is the status really live?
No: the block holds typed data, so it shows what you give it. To make it live, fetch your status service's response and fill SERVICES from it; the pill and the popover follow the data. The pulse is only decoration that says "live".
How does the popover work for keyboards and screen readers?
The pill is a button: Enter, Space or a tap opens the popover, Escape or a click outside closes it, and focus goes back to the pill. The popover is named "Service status" and lists the services as a real list. It sits in its own layer over the page and follows the same theme.
What happens with reduced motion?
The ring that pulses around the dot is removed and the dot stays. The two sides fade up once on load, which also stops. There is no other animation.
Related
- Pro
Left Right Row CTA
Slim bandsThe baseline left-right call to action: a split between solid rails with a headline and one line at the start and, past a divider, a tinted cell at the end that holds the Shine Button over an outline action.
- Pro
Left Right CTA with Eyebrow Pill
Card in cardA card-in-card call to action that follows your theme: a headline with a quiet outline pill that links to a customer story, one sentence, and the Shine Button with an outline action at the end.
- Pro
Left Right CTA with Compliance Badges
Trust and securityA split call to action between solid rails: the pitch, a Shine Button and an outline link at the start, and four certification cells on shared hairlines at the end whose marks are stamped on one after another.
- Pro
Left Right CTA with Progress Ring Tracker
Lists and stepsA band call to action between solid rails: a headline, a sentence and the Shine Button at the start, and at the end a framed figure with a progress ring drawn in three arcs, one per setup step, with the steps listed beside it.
- Pro
Compact Left Right CTA
Prices and offersA slim renewal band between solid rails with a Shine Button and an outline link on the end side, and a closing band of three cells that sets the two prices and the saving side by side.
- Pro
Dual Action CTA
Slim bandsA band call to action between solid rails with one split button: a Shine Button Get started link joined to a chevron that opens a menu of other routes, beside a headline and a sentence, in your theme.