Provider artwork

Map each DNS provider id to your own logo in React, drawn as the mark itself with no tile around it. Used by the provider row and picker.

provider-artwork is the one place the flow decides what a provider looks like. The provider row, the connect dialog, and the domain field all draw their marks through it, so a host supplies its artwork once.

Installation

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

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

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

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

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

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

Usage

const marks = {
  cloudflare: <CloudflareLogo />,
  vercel: (provider) => <img alt="" src={`/logos/${provider.id}.svg`} />,
};

<DomainFlow domain={domain} marks={marks} requirements={requirements} />;

marks is keyed by provider id and takes a node or a function of the provider descriptor. Whatever you pass is the mark. Without an entry the mark is the provider’s initial, and nothing is fetched while the surface renders, so a list of providers costs no requests.

API

Boundary

The accessible name comes from the provider descriptor the transport reports; the picture is yours. Nothing here reaches a provider’s servers for a logo.