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

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

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

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