Error28: Region Unavailable Notice

A geo-restriction page that answers the obvious question: an accent globe chip and headline, the detected region in a bordered strip, and a two-column ruled list of every market with its rollout status.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/error28?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/error28?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/error28.tsx, plus the two design-system primitives it renders through: badge6 for the square eyebrow and button1 for the seal call to action.

Quick start

The installed file exports error28Demo alongside the block: the exact props behind the preview above. Spread it to get a working restriction page in one line.

import { Error28, error28Demo } from "@/components/beste/block/error28";

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

Then pass the visitor's region from your edge middleware and your own market list:

import { Error28 } from "@/components/beste/block/error28";

export default function Unavailable({ country }: { country: string }) {
  return (
    <Error28
      label="Unavailable Here"
      code="451"
      heading="This one cannot travel <strong>to your part of the map</strong>."
      description="Licensing keeps this catalogue inside a handful of markets."
      labels={{ detectedTitle: "We think you are in", regionsTitle: "Where it is live" }}
      detectedRegion={country}
      regions={[
        { title: "United Kingdom", status: "Live" },
        { title: "Germany", status: "Live" },
        { title: "Canada", status: "Next quarter" },
      ]}
      button={{ label: "Tell me when it lands", href: "/notify" }}
      link={{ label: "Read the licensing note", href: "/legal/licensing" }}
    />
  );
}

Props

type Error28Labels = {
  detectedTitle?: string;
  regionsTitle?: string;
};

type RegionItem = {
  title: string;
  status: string;
};

type ActionLink = {
  label: string;
  href: string;
};

Behavior notes

• The market list is a two-column grid from the sm breakpoint up, with each row carrying its own bottom rule so the columns read as two continuous lists rather than a table.
• status is free text, not an enum, so "Live", "In licensing" and "Next quarter" all sit in the same column without any status styling to maintain.
• The detected-region strip only renders when detectedRegion is set; its caption is a separate prop, so the value can appear alone.
• Nothing about the block detects location on its own. Pass detectedRegion from your own edge middleware or geo header.
• heading is injected with dangerouslySetInnerHTML and accepts inline HTML; <strong> takes the accent colour. Keep the value under your own control, never user input.