---
title: Provider Mark
description: 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.

<ReactExample story="provider" />

## Installation

Install the package component:

```package-install
@domainkit/react domainkit effect @effect/atom-react react react-dom
```

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

```package-install
npx 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:

```tsx
<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`

| Prop | Type | Default | Description |
| - | - | - | - |
| `provider` | `Provider.Provider` | - | Provider descriptor whose identity and artwork are rendered. |

### `DomainKit.Root` mark configuration

| Prop | Type | Default | Description |
| - | - | - | - |
| `marks?` | `Provider.Marks` | `{}` | Provider artwork overrides keyed by provider ID. |