shadcn.io is not affiliated with official shadcn/ui
Status Chip Subscribe Navbar Block for Vue
A status-page bar with a chip that reads the state of five components and opens their list, and a Get updates popover whose Email, Feed and Webhook switch changes the field under it.
Installation
Overview
A status chip with subscribe channels for Vue with Ark UI, in the bar of an uptime-monitoring service called Beaconmoor. One bar between the page's rails: the wordmark, Current status, Incidents and Maintenance (from lg), a status chip and a "Get updates" button. The chip's words come from a typed list of five components, so it reads "All systems operational" when nothing is affected and counts the affected ones otherwise; it opens a popover that lists every component with its state in words and the incident's note on the affected one. "Get updates" opens a popover with an Email, Feed and Webhook switch: Email asks for an address, Feed shows a feed URL to copy, Webhook asks for an https endpoint, each with its own check, and a Shine Button for the two that need one. On a phone a sheet from the top holds the links and the same form inline. It's built from Popover, Toggle Group, Field, Input Group, Copy Button, Status, Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. For status pages that want one bar for state, history and sign-up.
FAQ
How do I change the components and the incident?
Edit COMPONENTS at the top of the file: an id, a name, a state ("operational", "degraded" or "outage") and a note shown while the component is affected. The chip's dot (the warning token only when something is affected), its words in full and short, and the popover's rows are all derived from it, so setting the one degraded component to "operational" turns the chip into "All systems operational". The components are made up for the demo.
What do the channels do?
Email and Webhook check what you typed (an address with an at sign and a dot; an https:// endpoint) and show a problem beside the field, or a line saying the channel was added. Nothing is sent or stored: the line says so, and the form starts empty each time the popover opens. Feed is read-only: the URL and a copy button that says "Feed URL copied". Replace submit with your own call. The three panes sit in one cell with the other two unseen, so the popover keeps its height on every channel.
How does it work with a keyboard and a screen reader?
The chip is a button named "Components: 1 component affected" and "Get updates" a button; both say whether their popover is open and Escape closes it and returns focus to them. State is told in words in every row ("Operational", "Degraded performance"), the icons are decoration and the warning colour only tints an icon. The channel switch is a labelled group of three buttons, the field labels are real labels, a problem is announced and linked to its field, and the result line is a polite status.
How does it work on a phone?
Below the lg breakpoint a menu button opens a sheet from the top with the links; below md, "Get updates" moves into the sheet as the same form, shown inline because a popover opened from inside a modal sheet fights its focus trap. The chip stays in the bar in a short form ("1 affected") and the wordmark shrinks to its icon on very narrow screens; nothing wraps at 320 pixels. Escape or the close button closes the sheet and focus goes back to the menu button.
Does it work right to left?
Yes. The bar mirrors and the popovers open under their buttons' end edge. Addresses, endpoints and the feed URL are always read left to right, as web addresses are, and the wordmark keeps its direction. Wrap the block in your locale provider so the popovers and the sheet follow the page.