<AdSlot />
Renders an ad placement in your React component tree. Displays a live ad creative when booked, or a booking placeholder when empty.
Overview
AdSlot fetches the current booking state from the Adkit API and renders one of three states:
If a slot is misconfigured, it logs a console.error and renders nothing — it will not crash your component tree.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| slot | string | Yes | — | Unique placement name. Alphanumeric, hyphens, and underscores only. |
| aspectRatio | AspectRatio | Yes | — | One of "16:9", "4:3", "1:1", "9:16", "banner" |
| siteId | string | No | from provider | Override the site ID from AdkitProvider. Required if used without a provider. |
| price | number | Yes | — | Daily price in cents (e.g. 2500 = $25/day). Set on first mount. If the slot is later mounted with a different price, you receive a dashboard notification and email to approve the change. |
| size | "sm" | "md" | "lg" | No | "lg" | Text size preset for the placeholder label and CTA |
| theme | "light" | "dark" | "auto" | No | "auto" | Color theme. "auto" follows the system preference. |
| className | string | No | — | Additional CSS classes on the outer container. If omitted, the slot defaults to width: 100%. |
| styles | AdSlotStyles | No | — | Fine-grained color overrides for the placeholder. See AdSlotStyles below. |
| silent | boolean | No | false | Disable all event tracking for this slot |
Aspect ratios
| Value | CSS ratio | Typical use |
|---|---|---|
| "16:9" | 16 / 9 | Video-format in-content placements |
| "4:3" | 4 / 3 | Sidebar boxes, square-ish placements |
| "1:1" | 1 / 1 | Square placements, social-style ads |
| "9:16" | 9 / 16 | Vertical / story-format placements |
| "banner" | 728 / 90 | Horizontal leaderboard banners (header / footer) |
The SDK warns in the console if your container's rendered aspect ratio deviates more than 5% from the declared ratio.
AdSlotStyles
Pass a styles object to override individual color tokens on the placeholder. All fields are optional.
| Field | Type | Description |
|---|---|---|
| borderColor | string | Color of the dashed placeholder outline |
| backgroundColor | string | Placeholder background (default: transparent) |
| textColorPrimary | string | Price text color |
| textColorSecondary | string | Label and CTA text color |
Size presets
The size prop controls the text size and spacing inside the placeholder.
| Value | Label | Price | CTA |
|---|---|---|---|
| "sm" | 7px | 10px | 6px |
| "md" | 9px | 14px | 8px |
| "lg" | 11px | 18px | 10px |
Basic example
Price is in cents
price={2500} displays as $25/day. The server validates and enforces the actual price — it cannot be changed client-side.All options
Without a provider
Pass siteId directly to use a slot without wrapping your app in AdkitProvider. This is useful for single isolated placements, but useAdkit() and its refresh() method will not be available.
Slot naming rules
The slot name must match /^[a-zA-Z0-9_-]+$/. Slots with invalid names are rejected and render nothing.
A slot identity is scoped to your site: siteId:slot. If the same identity is mounted twice on the same page, the second instance logs a warning and fires a slot_duplicate event.
Recommended naming patterns:
sidebarheader-bannerin-content-1footer-leaderboard