Custom Styling
Use documented props on AdSlot for supported layout and appearance customization.
className prop
Pass a className to control the outer container's layout — width, margin, padding, and position.
src/components/Sidebar.tsx
If no
className is provided, the slot defaults to width: 100% via the adkit-slot--default-width class. Providing any className removes this default — you take full control of the width.Appearance props
Use documented props for visual changes instead of targeting internal DOM structure.
| Prop | What it controls |
|---|---|
| theme | Built-in palette: "light", "dark", or "auto" |
| styles.borderColor | Placeholder border color |
| styles.backgroundColor | Placeholder background color |
| styles.textColorPrimary | Primary text color for the price |
| styles.textColorSecondary | Secondary text color for the label and CTA |
src/components/Sidebar.tsx
Public data attributes on the rendered slot
The root element exposes stable data attributes. These are the only DOM markers you should rely on if you need to identify a rendered slot.
| Attribute | Example value |
|---|---|
| data-adkit-site | abc123 |
| data-adkit-slot | sidebar |
| data-adkit-ratio | 4:3 |
| data-adkit-size | lg |
Do not rely on internal selectors like
.adkit-box, .adkit-cta, or modal class names. They are implementation details, not supported customization APIs.