Staaarter

Region Unavailable Notice

A full-height geo-restriction screen: an accent globe-icon chip and headline, the visitor's detected region in a bordered strip, a two-column ruled list of markets with their rollout status as colored badges (Available, Coming soon, Not planned), and a Notify me button that swaps to a confirmed state on click.

By Staaarter Team
Error
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/region-unavailable-notice.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error28.tsx instead.

Usage

The file also exports error28Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error28, error28Demo } from "@/components/blocks/error/error28";

export default function Page() {
  return <Error28 {...error28Demo} />;
}

Props

PropTypeDefaultDescription
headingReactNodenoneMain headline, can include an inline accent span.
descriptionstringnoneSupporting copy under the headline.
detectedRegionstringnoneRegion shown in the bordered detected-region strip.
marketsMarketStatus[]noneTwo-column ruled list of markets and their rollout status.
notifyLabelstringnoneLabel for the Notify me button before it's clicked.
notifiedLabelstringnoneLabel for the confirmation badge shown after clicking.
classNamestringnoneExtra classes for the outer section element.

Types

type MarketRolloutStatus = "Available" | "Coming soon" | "Not planned";

interface MarketStatus {
  market: string;
  status: MarketRolloutStatus;
}

Behavior notes

  • Clicking "Notify me" is real client-side state: it flips a notified flag and swaps the button for a confirmation badge, with no email input and no real notification actually scheduled.
  • detectedRegion and the market rollout list are static demo data, not a real IP-based geolocation lookup.
  • The rollout-status badges reuse this codebase's existing emerald/amber/muted tint convention for positive/pending/neutral states (see the Dashboard order-status badges), rather than inventing a new semantic color.

More Error Blocks

View all →

centered-404-message

Centered 404 Message

Minimal centered 404 with two CTAs and a divided row of popular page links.

404-with-site-search

404 With Site Search

404 screen with a working search box and a bordered list of suggested pages.

split-404-with-image

Split 404 With Image

Two-column 404 with the message on one side and a full-bleed photo that scales on hover on the other.

404-with-destination-cards

404 With Destination Cards

404 screen with a grid of icon destination cards plus fallback CTA buttons.

404-support-panel

404 Support Panel

Card-style 404 echoing the requested URL, with a real back button and a support/status link row.

inline-404-line

Inline 404 Line

The smallest possible 404: code and message on one divided line with one button underneath.