Provider Mark

Render DNS provider identity with host overrides, integrations.sh logos for known providers, and an accessible text fallback for unknown providers.

Provider.Mark renders the provider identity returned by the host transport. Known providers use the integrations.sh logo endpoint; unknown or failed images fall back to the provider’s initial.

import { Provider } from "@domainkit/react";

export function ProviderIdentity({ provider }) {
  return <Provider.Mark provider={provider} />;
}

Installation

Install the package component:

npm install @domainkit/react domainkit effect @effect/atom-react react react-dom

pnpm add @domainkit/react domainkit effect @effect/atom-react react react-dom

yarn add @domainkit/react domainkit effect @effect/atom-react react react-dom

bun add @domainkit/react domainkit effect @effect/atom-react react react-dom

Or copy the model-free wrapper through the DomainKit registry:

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

The copied ProviderMark only supplies the accessible visual wrapper. Pass your own image, such as https://integrations.sh/logo/cloudflare.com?sz=64, as its child.

Host overrides

Provide marks to DomainKit.Root when your application already owns provider artwork:

<DomainKit.Root
  marks={{
    cloudflare: <img alt="" src="/brands/cloudflare.svg" />,
  }}
  transport={transportLayer}
>
  {children}
</DomainKit.Root>

Marks are keyed by provider ID and may be a React node or a function of the provider descriptor. This keeps branding, asset policy, and self-hosted images under application control.

Accessibility

The wrapper has role="img" and uses the provider name as its accessible label. Decorative images inside it should use an empty alt so the provider is announced once.

API reference

Provider.Mark

DomainKit.Root mark configuration