> ## Documentation Index
> Fetch the complete documentation index at: https://sdk.ekanos.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Marketplace tile

> The card users see in the integration marketplace before connecting.

The marketplace tile is the first impression users have of your integration. Keep it simple — no context, no queries, no state. It renders from props alone.

## Basic tile

```tsx theme={null}
'use client';

import type { MarketplaceTileProps } from '@ekanos/sdk';
import { Badge } from '@ekanos/ui/badge';
import { Button } from '@ekanos/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@ekanos/ui/card';
import { Icon } from '@ekanos/ui/icon';

export function AcmePaymentsMarketplaceTile({
  onActivate,
  isActivated = false,
  href,
}: MarketplaceTileProps) {
  return (
    <Card className="shadow-card flex h-full flex-col border-0">
      <CardHeader className="gap-3">
        <div className="flex items-start justify-between gap-3">
          <div className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
            <Icon
              name="fa-light fa-credit-card"
              className="h-6 w-6"
              aria-hidden
            />
          </div>
          {isActivated && <Badge variant="secondary">Connected</Badge>}
        </div>
        <CardTitle className="text-lg">Acme Payments</CardTitle>
        <CardDescription>Volume, recent activity, and refunds.</CardDescription>
      </CardHeader>

      <CardContent className="mt-auto flex items-center justify-between gap-3 pb-6">
        <span className="text-muted-foreground text-sm">Payments</span>
        {isActivated ? (
          <Button
            variant="outline"
            size="sm"
            nativeButton={false}
            render={<a href={href ?? '#'} />}
          >
            Manage
          </Button>
        ) : (
          <Button size="sm" onClick={onActivate}>
            Connect
          </Button>
        )}
      </CardContent>
    </Card>
  );
}
```

## Props

`MarketplaceTileProps` is `IntegrationComponentProps` plus:

```ts theme={null}
{
  accountId: string;                    // from IntegrationComponentProps
  sourceId?: string;                    // optional
  integrationConfig?: Record<string, unknown>; // optional
  productId?: string;                   // exactly one of productId or
  productSlug?: string;                 // productSlug (discriminated union)

  onActivate?: () => void;              // Called when user clicks Connect
  isActivated?: boolean;                // Whether already connected
  href?: string;                        // Manage link URL (if activated)
}
```

## Declaration

```ts theme={null}
components: {
  marketplaceTile: AcmePaymentsMarketplaceTile,
}
```

Tiles are optional. Omit it and the marketplace renders a generic card from your `name` and `description`, plus whatever logo the platform holds for your product — the logo is assigned host-side, not declared.

## Styling

Use Ekanos semantic tokens — never hardcode colors:

```tsx theme={null}
{
  /* shadow-card for elevation, semantic color classes for surfaces and text */
}
<Card className="shadow-card">
  <CardHeader className="bg-card text-foreground">
    <CardTitle className="text-lg">Title</CardTitle>
    <CardDescription className="text-muted-foreground">
      Description
    </CardDescription>
  </CardHeader>
</Card>;
```

Outside Ekanos, load the `@ekanos/ui` token layer — see [Styling](/sdk/styling).

## Best practices

1. **Keep it focused** — show what the integration does, not how to use it
2. **Use the icon system** — `Icon` from `@ekanos/ui/icon` (Font Awesome)
3. **Show connected state** — `isActivated` tells the user if they're already connected
4. **Make Manage clickable** — `href` is the navigation URL for the integration's detail page
5. **No data queries** — the tile is static; user data comes later

## Next steps

* [Activation form](/sdk/surfaces/activation-form) — the connect flow
* [Widgets](/sdk/surfaces/widgets) — what users see after connecting


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.