IABConsentDialog

IABConsentDialog is an IAB TCF 2.3 compliant consent dialog that provides a tabbed interface for managing purpose consent and vendor preferences. It includes purpose grouping via stacks, individual purpose/vendor toggles, special purpose and feature disclosures, and legitimate interest handling.

Basic Usage

Pair it with IABConsentBanner inside the provider:

import { type ReactNode } from 'react';
import {
  ConsentManagerProvider,
  IABConsentBanner,
  IABConsentDialog,
} from '@c15t/nextjs';

export default function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'c15t',
        backendURL: '/api/c15t',
        iab: {
          enabled: true,
          cmpId: 123,
          vendors: [1, 2, 10, 25],
        },
      }}
    >
      <IABConsentBanner />
      <IABConsentDialog />
      {children}
    </ConsentManagerProvider>
  );
}

Tabs

The dialog has two tabs:

Purposes Tab

Displays all IAB purposes grouped into:

• Standalone purposes — Purpose 1 (Store and/or access information on a device) is always shown standalone per IAB TCF spec
• Stacks — Groups of related purposes determined by the GVL. Each stack is expandable to show individual purpose toggles
• Special features — Opt-in features like precise geolocation
• Essential functions — Special purposes and features that are locked (no user toggle) because they're required for basic operation

Each purpose shows:

• Name and description
• Number of vendors using this purpose
• Consent toggle (or lock icon for essential functions)
• Legitimate interest toggle where applicable
• Expandable vendor list

Vendors Tab

Displays all vendors from the GVL plus any custom vendors:

• Search and filter vendors
• Per-vendor consent and legitimate interest toggles
• Vendor details: privacy policy link, cookie usage, data retention
• Purpose and feature associations

Controlled State

By default, the dialog follows activeUI === 'dialog' from the consent store. Use open for manual control:

import { useState } from 'react';
import { IABConsentDialog } from '@c15t/nextjs';

function SettingsPage() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>TCF Preferences</button>
      <IABConsentDialog open={open} />
    </>
  );
}

Floating Trigger

Add a floating button so users can re-open the dialog after dismissing the banner. IAB TCF requires the preference center to be easily resurfaceable:

<IABConsentDialog showTrigger />;

{
  /* Custom trigger options */
}
<IABConsentDialog
  showTrigger={{
    icon: 'settings',
    defaultPosition: 'bottom-left',
    showWhen: 'after-consent',
    size: 'sm',
  }}
/>;

Footer Actions

The dialog footer provides three buttons:

Props