Provider mark

Wrap a provider logo or custom mark in an accessible, consistently sized surface without coupling copied UI to provider credentials or lifecycle state.

provider-mark is a model-free visual wrapper. It provides the accessible label and sizing surface; your application 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

Usage

Use the integrations.sh endpoint for provider artwork, or pass a self-hosted asset owned by your application.

<ProviderMark 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. Keep provider identity and asset policy in your host application.