CoreAIFluentProvider
View .mdRoot provider applying the CoreAI theme, global styles, and component defaults over Fluent's FluentProvider.
Default
Loading interactive example. Full source is available below.
View example source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import { CoreAIFluentProvider } from "@coreai-ds/react-components";
import { coreaiLightTheme } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import * as React from 'react';
export const Default = () => (<CoreAIFluentProvider theme={coreaiLightTheme}>
<Button appearance="primary">CoreAI theme</Button>
</CoreAIFluentProvider>);
export default Default;
API referenceGenerated CoreAI prop and type summaries
API
Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.
CoreAIFluentProvider API
interface CoreAIFluentProviderProps {
/**
* Passes styles applied to a component down to portals if enabled.
* @default true
*/
applyStylesToPortals?: boolean;
as?: "div";
children?: any;
className?: string;
/**
* Sets the hooks for custom styling components.
*/
customStyleHooks_unstable?: Partial<{ useAccordionHeaderStyles_unstable: CustomStyleHook; useAccordionItemStyles_unstable: CustomStyleHook; useAccordionPanelStyles_unstable: CustomStyleHook; useAccordionStyles_unstable: CustomStyleHook; useAlphaSliderStyles_unstable: CustomStyleHook; useAvatarGroupItemStyles_unstable: CustomStyleHook; useAvatarGroupPopoverStyles_unstable: CustomStyleHook; useAvatarGroupStyles_unstable: CustomStyleHook; useAvatarStyles_unstable: CustomStyleHook; useBadgeStyles_unstable: CustomStyleHook; useBreadcrumbButtonStyles_unstable: CustomStyleHook; useBreadcrumbDividerStyles_unstable: CustomStyleHook; useBreadcrumbItemStyles_unstable: CustomStyleHook; useBreadcrumbStyles_unstable: CustomStyleHook; useButtonStyles_unstable: CustomStyleHook; useCardFooterStyles_unstable: CustomStyleHook; useCardHeaderStyles_unstable: CustomStyleHook; useCardPreviewStyles_unstable: CustomStyleHook; useCardStyles_unstable: CustomStyleHook; useCarouselAutoplayButtonStyles_unstable: CustomStyleHook; useCarouselButtonStyles_unstable: CustomStyleHook; useCarouselCardStyles_unstable: CustomStyleHook; useCarouselNavButtonStyles_unstable: CustomStyleHook; useCarouselNavContainerStyles_unstable: CustomStyleHook; useCarouselNavImageButtonStyles_unstable: CustomStyleHook; useCarouselNavStyles_unstable: CustomStyleHook; useCarouselSliderStyles_unstable: CustomStyleHook; useCarouselStyles_unstable: CustomStyleHook; useCarouselViewportStyles_unstable: CustomStyleHook; useCheckboxStyles_unstable: CustomStyleHook; useComboboxStyles_unstable: CustomStyleHook; useCompoundButtonStyles_unstable: CustomStyleHook; useColorAreaStyles_unstable: CustomStyleHook; useColorPickerStyles_unstable: CustomStyleHook; useColorSliderStyles_unstable: CustomStyleHook; useColorSwatchStyles_unstable: CustomStyleHook; useCounterBadgeStyles_unstable: CustomStyleHook; useDataGridBodyStyles_unstable: CustomStyleHook; useDataGridCellStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridRowStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; useDataGridStyles_unstable: CustomStyleHook; useDialogActionsStyles_unstable: CustomStyleHook; useDialogBodyStyles_unstable: CustomStyleHook; useDialogContentStyles_unstable: CustomStyleHook; useDialogSurfaceStyles_unstable: CustomStyleHook; useDialogTitleStyles_unstable: CustomStyleHook; useDividerStyles_unstable: CustomStyleHook; useDrawerBodyStyles_unstable: CustomStyleHook; useDrawerFooterStyles_unstable: CustomStyleHook; useDrawerHeaderNavigationStyles_unstable: CustomStyleHook; useDrawerHeaderStyles_unstable: CustomStyleHook; useDrawerHeaderTitleStyles_unstable: CustomStyleHook; useDrawerInlineStyles_unstable: CustomStyleHook; useDrawerOverlayStyles_unstable: CustomStyleHook; useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook; useDrawerStyles_unstable: CustomStyleHook; useDropdownStyles_unstable: CustomStyleHook; useEmptySwatchStyles_unstable: CustomStyleHook; useFieldStyles_unstable: CustomStyleHook; useFlatTreeStyles_unstable: CustomStyleHook; useImageStyles_unstable: CustomStyleHook; useImageSwatchStyles_unstable: CustomStyleHook; useInfoButtonStyles_unstable: CustomStyleHook; useInfoLabelStyles_unstable: CustomStyleHook; useInlineDrawerStyles_unstable: CustomStyleHook; useInputStyles_unstable: CustomStyleHook; useInteractionTagPrimaryStyles_unstable: CustomStyleHook; useInteractionTagSecondaryStyles_unstable: CustomStyleHook; useInteractionTagStyles_unstable: CustomStyleHook; useLabelStyles_unstable: CustomStyleHook; useLinkStyles_unstable: CustomStyleHook; useListItemButtonStyles_unstable: CustomStyleHook; useListItemStyles_unstable: CustomStyleHook; useListStyles_unstable: CustomStyleHook; useListboxStyles_unstable: CustomStyleHook; useMenuButtonStyles_unstable: CustomStyleHook; useMenuDividerStyles_unstable: CustomStyleHook; useMenuGroupHeaderStyles_unstable: CustomStyleHook; useMenuGroupStyles_unstable: CustomStyleHook; useMenuItemCheckboxStyles_unstable: CustomStyleHook; useMenuItemLinkStyles_unstable: CustomStyleHook; useMenuItemRadioStyles_unstable: CustomStyleHook; useMenuItemStyles_unstable: CustomStyleHook; useMenuItemSwitchStyles_unstable: CustomStyleHook; useMenuListStyles_unstable: CustomStyleHook; useMenuPopoverStyles_unstable: CustomStyleHook; useMenuSplitGroupStyles_unstable: CustomStyleHook; useMessageBarActionsStyles_unstable: CustomStyleHook; useMessageBarBodyStyles_unstable: CustomStyleHook; useMessageBarGroupStyles_unstable: CustomStyleHook; useMessageBarStyles_unstable: CustomStyleHook; useMessageBarTitleStyles_unstable: CustomStyleHook; useAppItemStyles_unstable: CustomStyleHook; useAppItemStaticStyles_unstable: CustomStyleHook; useHamburgerStyles_unstable: CustomStyleHook; useNavCategoryItemStyles: CustomStyleHook; useNavDividerStyles_unstable: CustomStyleHook; useNavDrawerStyles_unstable: CustomStyleHook; useNavDrawerBodyStyles_unstable: CustomStyleHook; useNavDrawerFooterStyles_unstable: CustomStyleHook; useNavDrawerHeaderStyles_unstable: CustomStyleHook; useNavItemStyles_unstable: CustomStyleHook; useNavSectionHeaderStyles_unstable: CustomStyleHook; useNavSubItemStyles_unstable: CustomStyleHook; useNavSubItemGroupStyles_unstable: CustomStyleHook; useSplitNavItemStyles_unstable: CustomStyleHook; useOptionGroupStyles_unstable: CustomStyleHook; useOptionStyles_unstable: CustomStyleHook; useOverlayDrawerStyles_unstable: CustomStyleHook; usePersonaStyles_unstable: CustomStyleHook; usePopoverSurfaceStyles_unstable: CustomStyleHook; usePresenceBadgeStyles_unstable: CustomStyleHook; useProgressBarStyles_unstable: CustomStyleHook; useRadioGroupStyles_unstable: CustomStyleHook; useRadioStyles_unstable: CustomStyleHook; useRatingDisplayStyles_unstable: CustomStyleHook; useRatingItemStyles_unstable: CustomStyleHook; useRatingStyles_unstable: CustomStyleHook; useSearchBoxStyles_unstable: CustomStyleHook; useSelectStyles_unstable: CustomStyleHook; useSkeletonItemStyles_unstable: CustomStyleHook; useSkeletonStyles_unstable: CustomStyleHook; useSliderStyles_unstable: CustomStyleHook; useSpinButtonStyles_unstable: CustomStyleHook; useSpinnerStyles_unstable: CustomStyleHook; useSplitButtonStyles_unstable: CustomStyleHook; useSwatchPickerRowStyles_unstable: CustomStyleHook; useSwatchPickerStyles_unstable: CustomStyleHook; useSwitchStyles_unstable: CustomStyleHook; useTabListStyles_unstable: CustomStyleHook; useTabStyles_unstable: CustomStyleHook; useTeachingPopoverBodyStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselCardStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselFooterButtonStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselFooterStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselNavButtonStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselNavStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselPageCountStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselStyles_unstable: CustomStyleHook; useTeachingPopoverFooterStyles_unstable: CustomStyleHook; useTeachingPopoverHeaderStyles_unstable: CustomStyleHook; useTeachingPopoverActionsStyles_unstable: CustomStyleHook; useTeachingPopoverButtonStyles_unstable: CustomStyleHook; useTeachingPopoverStyles_unstable: CustomStyleHook; useTeachingPopoverPageCountStyles_unstable: CustomStyleHook; useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook; useTeachingPopoverTitleStyles_unstable: CustomStyleHook; useTagGroupStyles_unstable: CustomStyleHook; useTagPickerButtonStyles_unstable: CustomStyleHook; useTagPickerControlStyles_unstable: CustomStyleHook; useTagPickerGroupStyles_unstable: CustomStyleHook; useTagPickerInputStyles_unstable: CustomStyleHook; useTagPickerListStyles_unstable: CustomStyleHook; useTagPickerOptionGroupStyles_unstable: CustomStyleHook; useTagPickerOptionStyles_unstable: CustomStyleHook; useTagStyles_unstable: CustomStyleHook; useTableBodyStyles_unstable: CustomStyleHook; useTableCellActionsStyles_unstable: CustomStyleHook; useTableCellLayoutStyles_unstable: CustomStyleHook; useTableCellStyles_unstable: CustomStyleHook; useTableHeaderCellStyles_unstable: CustomStyleHook; useTableHeaderStyles_unstable: CustomStyleHook; useTableResizeHandleStyles_unstable: CustomStyleHook; useTableRowStyles_unstable: CustomStyleHook; useTableSelectionCellStyles_unstable: CustomStyleHook; useTableStyles_unstable: CustomStyleHook; useTextareaStyles_unstable: CustomStyleHook; useTextStyles_unstable: CustomStyleHook; useTimePickerCompatStyles_unstable: CustomStyleHook; useToastBodyStyles_unstable: CustomStyleHook; useToastContainerStyles_unstable: CustomStyleHook; useToasterStyles_unstable: CustomStyleHook; useToastFooterStyles_unstable: CustomStyleHook; useToastStyles_unstable: CustomStyleHook; useToastTitleStyles_unstable: CustomStyleHook; useToggleButtonStyles_unstable: CustomStyleHook; useToolbarButtonStyles_unstable: CustomStyleHook; useToolbarDividerStyles_unstable: CustomStyleHook; useToolbarGroupStyles_unstable: CustomStyleHook; useToolbarRadioButtonStyles_unstable: CustomStyleHook; useToolbarToggleButtonStyles_unstable: CustomStyleHook; useToolbarStyles_unstable: CustomStyleHook; useTooltipStyles_unstable: CustomStyleHook; useTreeItemLayoutStyles_unstable: CustomStyleHook; useTreeItemPersonaLayoutStyles_unstable: CustomStyleHook; useTreeItemStyles_unstable: CustomStyleHook; useTreeStyles_unstable: CustomStyleHook; useVirtualizerScrollViewDynamicStyles_unstable: CustomStyleHook; useVirtualizerScrollViewStyles_unstable: CustomStyleHook; useVirtualizerStyles_unstable: CustomStyleHook; }>;
/**
* Sets the direction of text & generated styles.
*/
dir?: "ltr" | "rtl";
overrides_unstable?: OverridesContextValue_unstable;
/**
* Allows getting a ref to the component instance.
* Once the component unmounts, React will set `ref.current` to `null`
* (or call the ref with `null` if you passed a callback ref).
*/
ref?: LegacyRef<HTMLDivElement>;
style?: CSSProperties;
/**
* Provides the document, can be undefined during SSR render.
*/
targetDocument?: Document;
/**
* Sets the theme used in a scope.
*/
theme?: Partial<Theme>;
/**
* When `true` (the default), wrapped components apply CoreAI's default
* props. Set to `false` to render with stock Fluent semantics — e.g.,
* when previewing the Web or Teams themes.
*/
withComponentDefaults?: boolean;
}
Implementation
CoreAI 0.12.0; Fluent 9.74.9.
Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.
Azure Brand Theme
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import * as React from 'react';
import { Text } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";
import { Spinner } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import { CoreAIFluentProvider } from "@coreai-ds/react-components";
import { azureLightTheme } from "@coreai-ds/react-components";
import { azureDarkTheme } from "@coreai-ds/react-components";
export const AzureBrandTheme = () => {
const AzureSample = ({ mode }: {
mode: 'light' | 'dark';
}) => {
const [checked, setChecked] = React.useState(true);
return (<div className="coreai-provider-azure-brand-example__panel">
<Text preset="heading4">Azure {mode === 'light' ? 'Light' : 'Dark'}</Text>
<Text preset="body">
Components below inherit the Azure brand ramp while keeping every CoreAI neutral, font,
and custom-token override.
</Text>
<div className="coreai-provider-azure-brand-example__buttons">
<Button appearance="primary">Primary</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="subtle">Subtle</Button>
</div>
<div className="coreai-provider-azure-brand-example__buttons">
<Switch checked={checked} onChange={(_, data) => setChecked(data.checked)} label="Brand switch"/>
<Spinner size="tiny"/>
<Link href="#">Brand link</Link>
</div>
</div>);
};
const styles = /* css */ `
.coreai-provider-azure-brand-example {
display: flex;
flex-wrap: wrap;
gap: var(--spacingHorizontalL);
}
.coreai-provider-azure-brand-example__panel {
flex: 1 1 280px;
min-width: 280px;
display: flex;
flex-direction: column;
row-gap: var(--spacingVerticalS);
padding: var(--spacingHorizontalL);
border-radius: var(--borderRadiusXLarge);
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
}
.coreai-provider-azure-brand-example__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--spacingHorizontalS);
align-items: center;
}
`;
return (<>
<style>{styles}</style>
<div className="coreai-provider-azure-brand-example">
<CoreAIFluentProvider theme={azureLightTheme}>
<AzureSample mode="light"/>
</CoreAIFluentProvider>
<CoreAIFluentProvider theme={azureDarkTheme}>
<AzureSample mode="dark"/>
</CoreAIFluentProvider>
</div>
</>);
};
export default AzureBrandTheme;
Custom Brand Theme
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import type { BrandVariants } from "@coreai-ds/react-components";
import type { CoreAITheme } from "@coreai-ds/react-components";
import { createCoreAILightTheme } from "@coreai-ds/react-components";
import { createCoreAIDarkTheme } from "@coreai-ds/react-components";
import * as React from 'react';
import { Text } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";
import { Spinner } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import { CoreAIFluentProvider } from "@coreai-ds/react-components";
export const CustomBrandTheme = () => {
// 1. A custom brand ramp. Fluent's theme factories derive every
// `colorBrand*`/`colorCompoundBrand*` token from these 16 stops.
// Key Color: #0000FF
const maxBlue: BrandVariants = {
10: '#09000C',
20: '#280044',
30: '#37006D',
40: '#3E0097',
50: '#3800CA',
60: '#0B10FF',
70: '#2A34FF',
80: '#3E4BFF',
90: '#4F5FFF',
100: '#5F72FF',
110: '#6F83FF',
120: '#8094FF',
130: '#90A5FF',
140: '#A2B5FF',
150: '#B4C6FF',
160: '#C7D6FF',
};
// 2. Build CoreAI themes from the custom ramp. The factories layer CoreAI's
// neutral-stroke, interactive-token, and font overrides on top of Fluent's
// generated brand + neutral tokens, so only the brand color changes.
const maxBlueLightTheme: CoreAITheme = createCoreAILightTheme(maxBlue);
const maxBlueDarkTheme: CoreAITheme = {
...createCoreAIDarkTheme(maxBlue),
// The factory-generated brand foregrounds are too dark for dark-mode
// contrast; lighten them the same way CoreAI does for its own ramp.
colorBrandForeground1: maxBlue[110],
colorBrandForeground2: maxBlue[120],
};
const BrandSample = () => {
const [checked, setChecked] = React.useState(true);
return (<div className="coreai-provider-custom-brand-example__panel">
<Text preset="heading4">Max Blue</Text>
<Text preset="body">
Components below inherit the custom brand ramp while keeping every CoreAI neutral, font,
and custom-token override.
</Text>
<div className="coreai-provider-custom-brand-example__buttons">
<Button appearance="primary">Primary</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="subtle">Subtle</Button>
</div>
<div className="coreai-provider-custom-brand-example__buttons">
<Switch checked={checked} onChange={(_, data) => setChecked(data.checked)} label="Brand switch"/>
<Spinner size="tiny"/>
<Link href="#">Brand link</Link>
</div>
</div>);
};
const styles = /* css */ `
.coreai-provider-custom-brand-example {
display: flex;
flex-wrap: wrap;
gap: var(--spacingHorizontalL);
}
.coreai-provider-custom-brand-example__panel {
flex: 1 1 280px;
min-width: 280px;
display: flex;
flex-direction: column;
row-gap: var(--spacingVerticalS);
padding: var(--spacingHorizontalL);
border-radius: var(--borderRadiusXLarge);
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
}
.coreai-provider-custom-brand-example__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--spacingHorizontalS);
align-items: center;
}
`;
return (<>
<style>{styles}</style>
<div className="coreai-provider-custom-brand-example">
<CoreAIFluentProvider theme={maxBlueLightTheme}>
<BrandSample />
</CoreAIFluentProvider>
<CoreAIFluentProvider theme={maxBlueDarkTheme}>
<BrandSample />
</CoreAIFluentProvider>
</div>
</>);
};
export default CustomBrandTheme;
Default Theme
Loading interactive example. Full source is available below.
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import * as React from 'react';
import { Text } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";
import { Spinner } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import { CoreAIFluentProvider } from "@coreai-ds/react-components";
import { coreaiLightTheme } from "@coreai-ds/react-components";
import { coreaiDarkTheme } from "@coreai-ds/react-components";
export const DefaultTheme = () => {
const CoreAISample = ({ mode }: {
mode: 'light' | 'dark';
}) => {
const [checked, setChecked] = React.useState(true);
return (<div className="coreai-provider-default-theme-example__panel">
<Text preset="heading4">CoreAI {mode === 'light' ? 'Light' : 'Dark'}</Text>
<Text preset="body">
The default CoreAI brand ramp with all neutral, font, and custom-token overrides
applied.
</Text>
<div className="coreai-provider-default-theme-example__buttons">
<Button appearance="primary">Primary</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="subtle">Subtle</Button>
</div>
<div className="coreai-provider-default-theme-example__buttons">
<Switch checked={checked} onChange={(_, data) => setChecked(data.checked)} label="Brand switch"/>
<Spinner size="tiny"/>
<Link href="#">Brand link</Link>
</div>
</div>);
};
const styles = /* css */ `
.coreai-provider-default-theme-example {
display: flex;
flex-wrap: wrap;
gap: var(--spacingHorizontalL);
}
.coreai-provider-default-theme-example__panel {
flex: 1 1 280px;
min-width: 280px;
display: flex;
flex-direction: column;
row-gap: var(--spacingVerticalS);
padding: var(--spacingHorizontalL);
border-radius: var(--borderRadiusXLarge);
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
}
.coreai-provider-default-theme-example__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--spacingHorizontalS);
align-items: center;
}
`;
return (<>
<style>{styles}</style>
<div className="coreai-provider-default-theme-example">
<CoreAIFluentProvider theme={coreaiLightTheme}>
<CoreAISample mode="light"/>
</CoreAIFluentProvider>
<CoreAIFluentProvider theme={coreaiDarkTheme}>
<CoreAISample mode="dark"/>
</CoreAIFluentProvider>
</div>
</>);
};
export default DefaultTheme;