Provider artwork

Your logo per provider id, drawn as the mark itself: nothing wraps it in a tile, so a circular logo stays a circle and a square one stays square.

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

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.