feat(react-headless-components-preview): scaffold the package and add first components by dmytrokirpa · Pull Request #35931 · microsoft/fluentui

dmytrokirpa · 2026-03-31T08:30:07Z

Summary

Introduces @fluentui/react-headless-components-preview, an opt-in package that exposes Fluent UI v9 headless primitives and their core composition building blocks.

This package is for teams building custom design systems that diverge from Fluent 2 visual styling. For most teams, @fluentui/react-components remains the recommended default.

Current API shape

Each exported component is available as:

an unstyled primitive component
a stable use[Component] hook
a stable render[Component] function
optional context hooks/context value hooks for compound scenarios

Components currently exported

Accordion family:
- primitives: Accordion, AccordionItem, AccordionHeader, AccordionPanel
- hooks: useAccordion, useAccordionItem, useAccordionHeader, useAccordionPanel
- render: renderAccordion, renderAccordionItem, renderAccordionHeader, renderAccordionPanel
- context hooks: useAccordionContext, useAccordionContextValues
Button:
- primitive: Button
- hooks: useButton
- render: renderButton
Divider:
- primitive: Divider
- hooks: useDivider
- render: renderDivider

What this package provides

Headless/unstyled primitives
Component behavior, semantics, and ARIA patterns
Keyboard behavior aligned with styled counterparts
Slot-based structure for composition
Low-level building blocks for advanced customization

What this package does not provide

Fluent design props (appearance, size, shape, etc.)
Griffel/token styling opinions
Motion/animation opinions
Visual accessibility styling (focus ring, contrast, hover/active visuals)

Package/workspace updates

New preview package scaffold in packages/react-components/react-headless-components-preview
Storybook stories added for currently exported components
Public docsite integration and build wiring updates
Upstream base hook/render exports consumed from source component packages

Related issue

Partially implements [Feature]: Headless core components in v9 #35562

packages/react-components/react-base-components/library/docs/Spec.md

github-actions · 2026-03-31T16:01:43Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-headless-components-preview` react-headless-components-preview: entire library	`0 B` `0 B`	`15.207 kB` `5.433 kB`	🆕 New entry

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react` ActivityItem	`71.22 kB` `23.347 kB`
`react` Announced	`38.472 kB` `13.275 kB`
`react` Autofill	`15.42 kB` `4.766 kB`
`react` Breadcrumb	`200.805 kB` `59.601 kB`
`react` Button	`194.354 kB` `55.886 kB`
`react` ButtonGrid	`179.242 kB` `53.891 kB`
`react` Calendar	`121.162 kB` `36.83 kB`
`react` Callout	`84.299 kB` `27.593 kB`
`react` Check	`53.206 kB` `17.835 kB`
`react` Checkbox	`59.978 kB` `19.874 kB`
`react` ChoiceGroup	`65.488 kB` `21.465 kB`
`react` ChoiceGroupOption	`58.769 kB` `19.353 kB`
`react` Coachmark	`92.7 kB` `29.305 kB`
`react` Color	`7.789 kB` `3.127 kB`
`react` ColorPicker	`134.97 kB` `42.125 kB`
`react` ComboBox	`250.687 kB` `71.515 kB`
`react` CommandBar	`201.861 kB` `59.387 kB`
`react` ContextualMenu	`154.229 kB` `47.566 kB`
`react` DatePicker	`183.251 kB` `55.892 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DetailsList	`229.929 kB` `65.81 kB`
`react` Dialog	`210.16 kB` `62.358 kB`
`react` Divider	`19.588 kB` `6.84 kB`
`react` DocumentCard	`215.843 kB` `63.666 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`34.28 kB` `11.488 kB`
`react` Dropdown	`233.151 kB` `67.962 kB`
`react` ExtendedPicker	`96.823 kB` `27.866 kB`
`react` Fabric	`41.728 kB` `14.343 kB`
`react` Facepile	`209.377 kB` `62.375 kB`
`react` FloatingPicker	`240.865 kB` `68.222 kB`
`react` FocusTrapZone	`16.99 kB` `5.891 kB`
`react` FocusZone	`55.1 kB` `17.451 kB`
`react` Grid	`179.242 kB` `53.891 kB`
`react` GroupedList	`135.035 kB` `40.67 kB`
`react` GroupedListV2	`122.659 kB` `37.758 kB`
`react` HoverCard	`96.784 kB` `30.688 kB`
`react` Icon	`51.887 kB` `17.263 kB`
`react` Icons	`66.339 kB` `24.385 kB`
`react` Image	`46.901 kB` `15.695 kB`
`react` Keytip	`81.301 kB` `26.677 kB`
`react` KeytipData	`14.05 kB` `4.583 kB`
`react` KeytipLayer	`103.089 kB` `31.9 kB`
`react` Keytips	`105.873 kB` `32.904 kB`
`react` Label	`38.324 kB` `13.241 kB`
`react` Layer	`48.089 kB` `16.348 kB`
`react` Link	`39.665 kB` `13.653 kB`
`react` List	`39.346 kB` `12.454 kB`
`react` MarqueeSelection	`74.49 kB` `22.402 kB`
`react` MessageBar	`189.388 kB` `56.33 kB`
`react` Modal	`93.738 kB` `30.223 kB`
`react` Nav	`186.825 kB` `55.723 kB`
`react` OverflowSet	`33.354 kB` `11.282 kB`
`react` Overlay	`40.885 kB` `14.077 kB`
`react` Panel	`200.327 kB` `59.336 kB`
`react` Persona	`114.591 kB` `36.435 kB`
`react` PersonaCoin	`114.591 kB` `36.435 kB`
`react` PersonaPresence	`58.076 kB` `19.372 kB`
`react` Pickers	`297.91 kB` `82.996 kB`
`react` Pivot	`187.734 kB` `56.5 kB`
`react` Popup	`12.312 kB` `4.197 kB`
`react` Positioning	`22.764 kB` `7.683 kB`
`react` PositioningContainer	`73.445 kB` `23.685 kB`
`react` ProgressIndicator	`39.477 kB` `13.528 kB`
`react` Rating	`82.086 kB` `26.09 kB`
`react` Fluent UI React (entire library)	`1.019 MB` `283.183 kB`
`react` ResizeGroup	`13.35 kB` `4.379 kB`
`react` ResponsiveMode	`8.13 kB` `2.966 kB`
`react` ScrollablePane	`55.541 kB` `17.718 kB`
`react` SearchBox	`187.63 kB` `55.936 kB`
`react` SelectableOption	`724 B` `413 B`
`react` SelectedItemsList	`231.35 kB` `67.176 kB`
`react` Selection	`42.418 kB` `12.26 kB`
`react` Separator	`35.365 kB` `12.132 kB`
`react` Shimmer	`49.249 kB` `16.258 kB`
`react` ShimmeredDetailsList	`240.71 kB` `68.549 kB`
`react` Slider	`57.627 kB` `19.198 kB`
`react` SpinButton	`191.297 kB` `57.006 kB`
`react` Spinner	`41.759 kB` `14.468 kB`
`react` Stack	`42.039 kB` `14.389 kB`
`react` Sticky	`32.577 kB` `10.488 kB`
`react` Styling	`46.033 kB` `15.135 kB`
`react` SwatchColorPicker	`189.637 kB` `57.417 kB`
`react` TeachingBubble	`204.648 kB` `60.317 kB`
`react` Text	`36.886 kB` `12.806 kB`
`react` TextField	`80.798 kB` `25.308 kB`
`react` Theme	`43.486 kB` `14.168 kB`
`react` ThemeGenerator	`12.384 kB` `4.116 kB`
`react` TimePicker	`240.515 kB` `69.311 kB`
`react` Toggle	`46.201 kB` `15.957 kB`
`react` Tooltip	`87.073 kB` `28.151 kB`
`react` Utilities	`82.938 kB` `25.15 kB`
`react` Viewport	`23.872 kB` `7.642 kB`
`react` WeeklyDayPicker	`101.348 kB` `31.644 kB`
`react` WindowProvider	`1.059 kB` `541 B`
`react-charting` AreaChart	`302.827 kB` `94.751 kB`
`react-charting` ChartHoverCard	`37.196 kB` `12.7 kB`
`react-charting` DeclarativeChart	`677.056 kB` `191.292 kB`
`react-charting` DonutChart	`203.52 kB` `63.663 kB`
`react-charting` GanttChart	`282.797 kB` `88.761 kB`
`react-charting` GaugeChart	`197.055 kB` `61.221 kB`
`react-charting` GroupedVerticalBarChart	`294.564 kB` `91.795 kB`
`react-charting` HeatMapChart	`285.643 kB` `89.439 kB`
`react-charting` HorizontalBarChart	`127.266 kB` `39.944 kB`
`react-charting` HorizontalBarChartWithAxis	`293.937 kB` `91.167 kB`
`react-charting` Legends	`151.485 kB` `46.4 kB`
`react-charting` LineChart	`332.438 kB` `101.79 kB`
`react-charting` MultiStackedBarChart	`181.754 kB` `55.275 kB`
`react-charting` PieChart	`134.305 kB` `42.299 kB`
`react-charting` PolarChart	`235.153 kB` `74.294 kB`
`react-charting` SankeyChart	`158.002 kB` `49.166 kB`
`react-charting` ScatterChart	`289.004 kB` `91.071 kB`
`react-charting` Sparkline	`87.616 kB` `29.671 kB`
`react-charting` StackedBarChart	`175.435 kB` `52.872 kB`
`react-charting` TreeChart	`84.809 kB` `26.636 kB`
`react-charting` VerticalBarChart	`303.589 kB` `93.173 kB`
`react-charting` VerticalStackedBarChart	`300.594 kB` `92.797 kB`

_{🤖 This report was generated against c78d22353ba03b9eb744f577332aa400daf10934}

github-actions · 2026-03-31T16:07:22Z

Pull request demo site: URL

.github/CODEOWNERS

packages/react-components/react-base-components/library/src/testing/isConformant.ts

apps/public-docsite-v9/.storybook/main.js

Hotell · 2026-04-02T13:13:26Z

we are having additional offline discussion regarding the package naming @fluentui/react-base-components

dmytrokirpa · 2026-04-08T11:54:14Z

we are having additional offline discussion regarding the package naming @fluentui/react-base-components

renamed to @fluentui/react-headless-components

… first components

Hotell

left some comments / questions

nothing blocking for kickoff , ty

packages/react-components/react-headless-components-preview/library/.babelrc.json

packages/react-components/react-headless-components-preview/library/.swcrc

packages/react-components/react-headless-components-preview/library/README.md

packages/react-components/react-headless-components-preview/library/src/index.ts

packages/react-components/react-headless-components-preview/library/project.json

...eact-components/react-headless-components-preview/library/src/components/Button/useButton.ts

...es/react-components/react-headless-components-preview/library/bundle-size/webpack.analyze.js

...t-components/react-headless-components-preview/library/src/utils/mapStateToDataAttributes.ts

dmytrokirpa self-assigned this Mar 31, 2026

dmytrokirpa added Fluent UI react-components (v9) Headless Hooks labels Mar 31, 2026

github-actions bot added the NX: core label Mar 31, 2026

microsoft-github-policy-service bot added the PR: API Modified label Mar 31, 2026

dmytrokirpa force-pushed the feat/export-base-hooks-from-suite branch from 2da26f5 to 1502ffe Compare March 31, 2026 15:53

github-actions bot added the CI label Mar 31, 2026

dmytrokirpa force-pushed the feat/export-base-hooks-from-suite branch 2 times, most recently from a0b20cb to 4118175 Compare March 31, 2026 15:55

dmytrokirpa changed the title ~~feat(react-components): add separate entrypoint for Fluent UI base state hooks~~ feat(react-base-components): add a new package to export Fluent UI base state hooks and render functions Mar 31, 2026

dmytrokirpa commented Mar 31, 2026

View reviewed changes

packages/react-components/react-base-components/library/docs/Spec.md Outdated Show resolved Hide resolved

github-actions bot reviewed Mar 31, 2026

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

Hotell reviewed Apr 1, 2026

View reviewed changes

packages/react-components/react-base-components/library/src/testing/isConformant.ts Outdated Show resolved Hide resolved

dmytrokirpa force-pushed the feat/export-base-hooks-from-suite branch 6 times, most recently from dc4296c to 8ced617 Compare April 1, 2026 15:34

dmytrokirpa requested a review from Hotell April 1, 2026 15:51

dmytrokirpa commented Apr 1, 2026

View reviewed changes

apps/public-docsite-v9/.storybook/main.js Outdated Show resolved Hide resolved

dmytrokirpa marked this pull request as ready for review April 1, 2026 15:57

dmytrokirpa requested review from a team, ValentinaKozlova and mainframev as code owners April 1, 2026 15:57

dmytrokirpa requested review from a team, JustSlone, jurokapsiar and tudorpopams as code owners April 1, 2026 15:57

dmytrokirpa changed the title ~~feat(react-base-components): add a new package to export Fluent UI base state hooks and render functions~~ feat(react-headless): add a new package to export Fluent UI base state hooks and render functions Apr 8, 2026

dmytrokirpa mentioned this pull request Apr 10, 2026

feat: update base hooks and render functions types to support headless #35972

Merged

dmytrokirpa marked this pull request as draft April 10, 2026 11:27

dmytrokirpa force-pushed the feat/export-base-hooks-from-suite branch from 712e282 to b42ce8f Compare April 13, 2026 06:47

dmytrokirpa changed the title ~~feat(react-headless): add a new package to export Fluent UI base state hooks and render functions~~ feat(react-headless-components-preview): scaffold the package and add first components Apr 13, 2026

feat(react-headless-components-preview): scaffold the package and add…

7397728

… first components

dmytrokirpa force-pushed the feat/export-base-hooks-from-suite branch from b42ce8f to 7397728 Compare April 13, 2026 07:26

dmytrokirpa added 2 commits April 13, 2026 09:41

add missing return type

17976e4

add react-utilities export and fix lint issues for stories

01cde59

dmytrokirpa marked this pull request as ready for review April 13, 2026 09:33

cleanup tailwindcss configuration

274492a

Hotell approved these changes Apr 13, 2026

View reviewed changes

mainframev reviewed Apr 13, 2026

View reviewed changes

...t-components/react-headless-components-preview/library/src/utils/mapStateToDataAttributes.ts Outdated Show resolved Hide resolved

mainframev approved these changes Apr 13, 2026

View reviewed changes

address review comments

b9bff75

dmytrokirpa force-pushed the feat/export-base-hooks-from-suite branch from e0791a0 to b9bff75 Compare April 13, 2026 14:23

Merge branch 'master' into feat/export-base-hooks-from-suite

18483c6

dmytrokirpa enabled auto-merge (squash) April 13, 2026 14:26

dmytrokirpa merged commit 26c670a into microsoft:master Apr 13, 2026
12 checks passed

Conversation

dmytrokirpa commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Current API shape

Components currently exported

What this package provides

What this package does not provide

Package/workspace updates

Related issue

Uh oh!

Uh oh!

github-actions bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Hotell commented Apr 2, 2026

Uh oh!

dmytrokirpa commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dmytrokirpa commented Mar 31, 2026 •

edited

Loading

github-actions bot commented Mar 31, 2026 •

edited

Loading

dmytrokirpa commented Apr 8, 2026 •

edited

Loading