Sponsors

Explainer includes a built-in sponsor section that displays below the table of contents in the right sidebar. The configuration is centralized in the @explainer/ui package and shared across both the docs and blog apps.

How it works

Sponsor cards appear automatically below the TOC on any page that has a table of contents. They are only visible on xl breakpoints and above, matching the TOC visibility.

Each sponsor displays:

• A logo (small, rounded)
• A name
• A tier badge (gold, silver, or bronze) with distinct visual styling

Configuration

Adding sponsors

Edit packages/ui/src/lib/sponsors.ts and add entries to the defaultSponsors array:

import type { Sponsor } from '@explainer/ui'

export const defaultSponsors: Sponsor[] = [
  {
    id: 'acme',
    name: 'Acme Corp',
    href: 'https://acme.example.com',
    logoUrl: 'https://acme.example.com/logo.svg',
    tier: 'gold',
  },
  {
    id: 'widgets',
    name: 'Widgets Inc',
    href: 'https://widgets.example.com',
    logoUrl: 'https://widgets.example.com/logo.png',
    tier: 'silver',
  },
]

Sponsor type

interface Sponsor {
  id: string        // Unique identifier
  name: string      // Display name
  href: string      // Link URL (opens in new tab)
  logoUrl: string   // Logo image URL
  tier: 'gold' | 'silver' | 'bronze'
}

Tier styling

The default tiers and their colors are defined in packages/ui/src/lib/sponsors.ts via two objects: sponsorTierStyles (card border & background) and sponsorBadgeStyles (badge colors). You can customize them directly:

export const sponsorTierStyles: Record<Sponsor['tier'], string> = {
  gold: 'border-yellow-500/50 bg-yellow-500/5',
  silver: 'border-zinc-400/50 bg-zinc-400/5',
  bronze: 'border-orange-700/50 bg-orange-700/5',
}

export const sponsorBadgeStyles: Record<Sponsor['tier'], string> = {
  gold: 'bg-yellow-500/15 text-yellow-700 dark:text-yellow-400',
  silver: 'bg-zinc-400/15 text-zinc-600 dark:text-zinc-400',
  bronze: 'bg-orange-700/15 text-orange-800 dark:text-orange-400',
}

To add a new tier or change colors, update both objects and the Sponsor['tier'] union type.

Customization

Using the component directly

You can use the SponsorCards component anywhere in your layout:

import { SponsorCards, defaultSponsors } from '@explainer/ui'

<SponsorCards
  sponsors={defaultSponsors}
  title="Our Sponsors"    // optional, defaults to "Sponsors"
  className="mt-8"        // optional additional classes
/>

Custom sponsor list

Use the getSponsors helper to override individual sponsors:

import { getSponsors } from '@explainer/ui'

const sponsors = getSponsors({
  acme: { name: 'Acme Corp (Premium)' },
})

Visibility

• Sponsors only appear on pages that have a table of contents
• The section is hidden when the defaultSponsors array is empty
• On smaller screens (< xl), the entire right sidebar (TOC + sponsors) is hidden