Core Concepts

The component library is intentionally repetitive on its surface — most components accept the same configuration objects (themes, lead options, CTAs, rules). This section documents that shared surface once, so individual component pages can focus on what's unique to each component.

Mental model

A typical component invocation looks like this:

<ClassicQuizPlay
  entityId="quiz-123"          // identifies the entity in the Fans United backend
  sdk={sdk}                    // shared SDK instance (one per app)
  template={WidgetTemplate.STANDARD}  // layout
  language="en"                // i18n
  themeOptions={...}           // theming
  leads={...}                  // optional inline lead capture
  signInCTA={...}              // optional sign-in CTA (gated entities)
  additionalCTA={...}          // optional CTA on results screen
  rulesDisplay={...}           // optional info icon + modal/link to rules
/>

Every prop after language is shared — the same shape works across nearly every component in the library. Learn it once here; reuse it everywhere.

What's in this section

Concept	What it covers
Templates	The three core layouts (`STANDARD`, `SPLIT`, `OVERLAY`) and per-component variants.
Theming	`CustomThemeOptions` — colors, typography, spacing, radii, breakpoints, gradients.
Internationalization	Supported languages, the `language` prop, and global `initializeI18n()`.
Lead Collection	The inline `leads` prop on game components.
Sign-in CTA	`SignInCTADetails` — gating authenticated entities behind your sign-in flow.
Additional CTA	`AdditionalCTADetails` — an extra button on the results screen.
Rules Display	An info icon that opens a rules modal or links to an external rules page.
Profile Sync	Write collected lead data back to the user's Fans United profile.

How to use this section

Read the page once, then refer back when you see the same prop on another component.
Each component page links here. When a component page says "see [Theming]", that's where to go for the full shape.
Composition is intentional — themeOptions, leads, signInCTA, etc. can all be combined on the same component without conflict.

Tip: define configuration once, reuse it

For consistency across an integration, define your shared configuration objects in a single module and import them where needed:

// src/widgets/config.ts
import type { CustomThemeOptions, SignInCTADetails } from "fansunited-frontend-core";

export const brandTheme: CustomThemeOptions = { /* ... */ };

export const brandSignInCTA: SignInCTADetails = {
  defaultLabel: "Sign In",
  onClick: () => openSignInModal(),
};

// any widget rendering site
import { brandTheme, brandSignInCTA } from "./widgets/config";

<ClassicQuizPlay
  {...quizProps}
  themeOptions={brandTheme}
  signInCTA={brandSignInCTA}
/>

This keeps theming and CTA behavior centralised — change once, propagate everywhere.