From Fluent UI React v9

// Fluent UI React v9
import { FluentProvider, webLightTheme } from "@fluentui/react-components";

<FluentProvider theme={webLightTheme} dir="ltr">
  <App />
</FluentProvider>

// Yugen UI
import { YugenProvider } from "@/components/ui";

<YugenProvider applyToDocument theme="light" brand="web" dir="ltr">
  <Toaster />
  <App />
</YugenProvider>

// Fluent: BrandVariants 10 → 160 passed to createLightTheme / createDarkTheme
const brand: BrandVariants = { 10: "#061724", 20: "#082338", /* … */ 160: "#ebf3fc" };
const theme = createLightTheme(brand);

/* Yugen: the same 16 steps, declared once in tokens.css; light and dark pick the right step */
[data-brand="contoso"] {
  --brand-10: #061724;
  --brand-20: #082338;
  /* … */
  --brand-160: #ebf3fc;
}

// Fluent UI React v9 with Griffel
import { makeStyles, tokens, typographyStyles } from "@fluentui/react-components";

const useStyles = makeStyles({
  root: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalS,
    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXL}`,
    backgroundColor: tokens.colorNeutralBackground1,
    borderRadius: tokens.borderRadiusMedium,
    boxShadow: tokens.shadow4,
    ":hover": { backgroundColor: tokens.colorNeutralBackground1Hover },
  },
  title: { ...typographyStyles.subtitle1, color: tokens.colorNeutralForeground1 },
  meta: { ...typographyStyles.caption1, color: tokens.colorNeutralForeground3 },
});

function Tile() {
  const styles = useStyles();
  return (
    <div className={styles.root}>
      <h3 className={styles.title}>Revenue</h3>
      <span className={styles.meta}>Updated 5 minutes ago</span>
    </div>
  );
}

// Yugen UI: the same tokens, written as utilities
function Tile() {
  return (
    <div className="flex flex-col gap-2 rounded-medium bg-background-1 px-5 py-4 shadow-4 hover:bg-background-1-hover">
      <h3 className="text-subtitle1 font-semibold text-foreground-1">Revenue</h3>
      <span className="text-caption1 text-foreground-3">Updated 5 minutes ago</span>
    </div>
  );
}

// Fluent UI React v9
<Combobox placeholder="Choose a city" onOptionSelect={(_, data) => setCity(data.optionValue)}>
  <Option value="hn">Hanoi</Option>
  <Option value="dn">Da Nang</Option>
</Combobox>

// Yugen UI: options is an array, the callback gets the value
<Combobox
  placeholder="Choose a city"
  options={[
    { value: "hn", label: "Hanoi" },
    { value: "dn", label: "Da Nang" },
  ]}
  onValueChange={setCity}
/>

// Fluent UI React v9
const toasterId = useId("toaster");
const { dispatchToast } = useToastController(toasterId);
dispatchToast(
  <Toast>
    <ToastTitle>Saved</ToastTitle>
    <ToastBody>Changes take effect immediately.</ToastBody>
  </Toast>,
  { intent: "success" },
);
<Toaster toasterId={toasterId} />

// Yugen UI: options are an object, no JSX needed
const { dispatchToast } = useToast("settings");
dispatchToast({ intent: "success", title: "Saved", body: "Changes take effect immediately." });
<Toaster toasterId="settings" />

// Or the static helper for the default Toaster (place <Toaster /> in YugenProvider)
toast({ intent: "success", title: "Saved" });