Provider mark

A React wrapper that gives a DNS provider logo an accessible label and consistent size for provider pickers and connection cards.

provider-mark is a visual wrapper. It provides the accessible label and size; your app supplies the image, SVG, or other mark.

import { ProviderMark } from "../../registry/ui/provider-mark.tsx";

export default function ProviderMarkExample() {
  return (
    <div className="grid w-full max-w-lg gap-3 sm:grid-cols-2">
      <div className="flex items-center gap-3 rounded-xl border border-border bg-card p-4 shadow-sm">
        <ProviderMark label="Cloudflare">
          <img alt="" src="https://integrations.sh/logo/cloudflare.com?sz=64" />
        </ProviderMark>
        <div>
          <div className="text-sm font-medium">Cloudflare</div>
          <div className="text-xs text-muted-foreground">DNS provider</div>
        </div>
      </div>
      <div className="flex items-center gap-3 rounded-xl border border-border bg-card p-4 shadow-sm">
        <ProviderMark label="Vercel">
          <img alt="" src="https://integrations.sh/logo/vercel.com?sz=64" />
        </ProviderMark>
        <div>
          <div className="text-sm font-medium">Vercel</div>
          <div className="text-xs text-muted-foreground">DNS provider</div>
        </div>
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/provider-mark.json

pnpm dlx shadcn@latest add https://domain-kit.dev/r/provider-mark.json

yarn dlx shadcn@latest add https://domain-kit.dev/r/provider-mark.json

bunx shadcn@latest add https://domain-kit.dev/r/provider-mark.json

nubx shadcn@latest add https://domain-kit.dev/r/provider-mark.json

aube dlx shadcn@latest add https://domain-kit.dev/r/provider-mark.json

Usage

Pass any logo: an asset your app hosts, or an image from an endpoint such as integrations.sh.

<ProviderMark label="Cloudflare">
  <img alt="" src="https://integrations.sh/logo/cloudflare.com?sz=64" />
</ProviderMark>

The mark is 32px. Pass size-4 through className for the compact marks a picker or a domain row uses. The corner radius is a share of the size, so every size clips its artwork to the same shape.

<ProviderMark className="size-4" label="Cloudflare">
  <img alt="" src="https://integrations.sh/logo/cloudflare.com?sz=64" />
</ProviderMark>

API

Prop	Type	Required	Description
`children`	`ReactNode`	yes	Logo, SVG, or other visual mark.
`label`	`string`	yes	Accessible name exposed through `aria-label`.

ProviderMark also accepts native span props and className.

Decorative child images should use alt=""; the wrapper announces the provider once through its role="img" and label. Your app still controls provider identity and asset policy.