Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

Service Dependency Map Error Block for React

A full-screen page for one failing service in a marketplace: a framed map of five services joined by hairlines, a radio group that opens each service's panel, and a list of what still works counted from the dependencies.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Say which part of your product is down and what that means for the visitor, with this microservice down error for React with Base UI. It's a whole screen with the page's rails and one band across it. At the end of the band are the headline, one sentence and the Shine Button Keep browsing, the only colored control; at the start, drawn first on a wide screen, a framed map of five services joined by hairlines, a dashed line wherever a link is broken. The services are a native radio group, so the arrow keys move between them, and the chosen one's panel names its state, what it depends on, what needs it and when it should be back. Under it a list says what still works (browse, view your account) and what doesn't (pay, get a refund), each with a shape and a word. Every state is counted from one typed list of dependencies, so the map, the panel and the list always agree. The frame and the band's rules come from Guides, and the entrance is CSS only. For a marketplace, a SaaS app or any product made of services.

FAQ

How do I describe my own services?

Edit SERVICES. Each one has a name, a sentence about what it does, a place on the map in percent, the services it can't work without (required) and the ones it can work without (optional), and fault: true on the one that is failing. A service is down when it fails itself or a required service is down, and degraded when only an optional one is not up, so changing the fault moves the whole map. CAPABILITIES lists what a visitor can do and which services each needs, and the available count is counted from it.

Is the map usable without a mouse?

Yes. The five services are one native radio group, so Tab enters it once and the arrow keys move between services and choose them, in the order they appear in the list; each is named with its state ("Payments, Down"). Choosing one swaps its panel in place and a polite status message reads the service, its state and the recovery line. The map itself keeps its left-to-right layout in right-to-left languages, because it's a diagram.

How can you tell a broken service from a working one without color?

By shape, word and line. Operational is a solid square, degraded an outline triangle and down a cross, each next to its word, and the words get heavier as the news gets worse. A link to or from a service that is down is dashed instead of solid. The one status color is a small alert icon on the recovery estimate of the failing service.

Where does the estimated recovery come from?

It is typed (RECOVERY, "30 to 45 minutes"), because only a person can say it honestly, and it appears only on the failing service. A service that is down because of it says "Back when Payments is back" instead, counted from its required services. In your app, fill the estimate from your incident tool, and leave it out when you don't have one.

What status should this page return?

A 503 with a Retry-After header when you can estimate one, for the page or the request that needed the failing service. Browsing pages that still work should return 200 as usual. This block can't set it; your server or framework does.

What changes on a phone?

The headline and Keep browsing come first, then the map at a shorter height with narrower cards, then the panel and the list of what works in two columns. Nothing scrolls sideways down to 320 px.

  • Pro

    API Uptime Strips Error

    Server and outages

    A full-screen outage page for an API host: the display 503, a notify-me form that saves in the page, and four APIs as rows of thirty day-cells with a shape and a word for today and an uptime counted from the minutes.

  • Pro

    Services Status Error

    Server and outages

    A hosting platform's status as one framed panel: six services with a shape and a word for each state, a summary counted from them, an Affected only filter that holds the panel's height, and a Refresh status button.

  • Pro

    Database Backoff Schedule Error

    Server and outages

    A full-screen page for a database that refuses connections: Retry now and a switch that retries by itself on a press-started countdown, four pool cells and the backoff schedule drawn to scale.

  • Pro

    DNS Lookup Chain Error

    Network

    A full-screen page for an address that can't be found: an editable address, a Run the check button, and the lookup drawn as five hops that walk one at a time and stop at the one with no answer.

  • Pro

    CORS Blocked Request Error

    Network

    A full-screen page for a cross-origin request the browser blocked: a drawn exchange with the reply's headers and the missing one dashed, the console line in a copy strip, and three fixes with snippets you can copy.

  • Pro

    Connection Fallback Error

    Network

    A full-screen page for a live connection that dropped and fell back: three signal bars, three transport rows with a shape and a word each, Reconnect now as a short scripted attempt, and a Keep using polling toggle.

All 100 error blocks