Area
React Components (@fluentui/react-components)
Describe the feature that you would like added
Track the progress of adding use{Component}Base_unstable hooks to all @fluentui/react-{name} packages. These base state hooks expose the component state computation logic without Fluent-specific rendering, enabling third-party design system authors to build on top of Fluent's behavior while supplying their own visual implementation.
Status definitions:
- ✅ Done — Hook exported from the component package public index
- 👀 In Review — PR open and ready for review
- 🚧 In Progress — Draft PR open
- ⬜ Not Started — No implementation
| Component |
Package |
PR |
Exported in @fluentui/react-{name} |
Available in @fluentui/react-base-components |
| Accordion |
@fluentui/react-accordion |
#35682 #35897 |
✅ Done |
🚧 In Progress |
| Avatar |
@fluentui/react-avatar |
#35696 #35899 |
✅ Done |
❌ |
| Badge |
@fluentui/react-badge |
#35811 |
✅ Done |
🚧 In Progress |
| Breadcrumb |
@fluentui/react-breadcrumb |
#35819 |
✅ Done |
🚧 In Progress |
| Button |
@fluentui/react-button |
#35689 #35890 |
✅ Done |
🚧 In Progress |
| Card |
@fluentui/react-card |
#35824 |
✅ Done |
🚧 In Progress |
| Carousel |
@fluentui/react-carousel |
#35918 |
🚧 In Progress |
❌ |
| Checkbox |
@fluentui/react-checkbox |
#35826 |
✅ Done |
❌ |
| ColorPicker |
@fluentui/react-color-picker |
#35919 |
🚧 In Progress |
❌ |
| Combobox |
@fluentui/react-combobox |
#35915 |
✅ Done |
❌ |
| Dialog |
@fluentui/react-dialog |
#35911 |
🚧 In Progress |
❌ |
| Divider |
@fluentui/react-divider |
#35679 #35889 |
✅ Done |
🚧 In Progress |
| Drawer |
@fluentui/react-drawer |
#35910 |
🚧 In Progress |
❌ |
| Field |
@fluentui/react-field |
#35827 |
✅ Done |
❌ |
| Image |
@fluentui/react-image |
#35808 |
✅ Done |
🚧 In Progress |
| InfoLabel |
@fluentui/react-infolabel |
#35810 |
🚧 In Progress |
❌ |
| Input |
@fluentui/react-input |
#35813 |
✅ Done |
🚧 In Progress |
| Label |
@fluentui/react-label |
#35905 |
✅ Done |
❌ |
| Link |
@fluentui/react-link |
#35816 |
✅ Done |
🚧 In Progress |
| List |
@fluentui/react-list |
#35821 |
🚧 In Progress |
❌ |
| Menu |
@fluentui/react-menu |
#35660 #35900 |
🚧 In Progress |
❌ |
| MessageBar |
@fluentui/react-message-bar |
#35908 |
👀 In Review |
❌ |
| Nav |
@fluentui/react-nav |
#35812 |
🚧 In Progress |
❌ |
| Persona |
@fluentui/react-persona |
#35697 #35814 |
✅ Done |
🚧 In Progress |
| Popover |
@fluentui/react-popover |
#35635 #35901 |
👀 In Review |
❌ |
| ProgressBar |
@fluentui/react-progress |
#35817 |
✅ Done |
❌ |
| Radio |
@fluentui/react-radio |
#35894 |
✅ Done |
🚧 In Progress |
| Rating |
@fluentui/react-rating |
#35823 |
✅ Done |
🚧 In Progress |
| SearchBox |
@fluentui/react-search |
#35825 |
✅ Done |
🚧 In Progress |
| Select |
@fluentui/react-select |
#35906 |
✅ Done |
❌ |
| Skeleton |
@fluentui/react-skeleton |
#35809 |
✅ Done |
🚧 In Progress |
| Slider |
@fluentui/react-slider |
#35815 |
✅ Done |
🚧 In Progress |
| SpinButton |
@fluentui/react-spinbutton |
#35907 |
✅ Done |
🚧 In Progress |
| Spinner |
@fluentui/react-spinner |
#35818 |
✅ Done |
🚧 In Progress |
| Switch |
@fluentui/react-switch |
#35820 |
✅ Done |
🚧 In Progress |
| Table |
@fluentui/react-table |
#35916 |
🚧 In Progress |
❌ |
| Tabs |
@fluentui/react-tabs |
#35638 #35675 #35902 |
✅ Done |
❌ |
| TagPicker |
@fluentui/react-tag-picker |
#35913 |
🚧 In Progress |
❌ |
| Tags |
@fluentui/react-tags |
#35912 |
✅ Done |
❌ |
| TeachingPopover |
@fluentui/react-teaching-popover |
#35920 |
🚧 In Progress |
❌ |
| Textarea |
@fluentui/react-textarea |
#35822 #35886 |
✅ Done |
🚧 In Progress |
| Toast |
@fluentui/react-toast |
#35914 |
👀 In Review |
❌ |
| ToggleButton |
@fluentui/react-button |
#35689 #35890 |
✅ Done |
🚧 In Progress |
| Toolbar |
@fluentui/react-toolbar |
#35658 #35903 |
👀 In Review |
❌ |
| Tooltip |
@fluentui/react-tooltip |
#35637 #35904 |
✅ Done |
❌ |
| Tree |
@fluentui/react-tree |
#35917 |
🚧 In Progress |
❌ |
Additional context
No response
Have you discussed this feature with our team
@dmytrokirpa
Validations
Priority
High
Area
React Components (@fluentui/react-components)
Describe the feature that you would like added
Track the progress of adding
use{Component}Base_unstablehooks to all@fluentui/react-{name}packages. These base state hooks expose the component state computation logic without Fluent-specific rendering, enabling third-party design system authors to build on top of Fluent's behavior while supplying their own visual implementation.Status definitions:
@fluentui/react-{name}@fluentui/react-base-components@fluentui/react-accordion@fluentui/react-avatar@fluentui/react-badge@fluentui/react-breadcrumb@fluentui/react-button@fluentui/react-card@fluentui/react-carousel@fluentui/react-checkbox@fluentui/react-color-picker@fluentui/react-combobox@fluentui/react-dialog@fluentui/react-divider@fluentui/react-drawer@fluentui/react-field@fluentui/react-image@fluentui/react-infolabel@fluentui/react-input@fluentui/react-label@fluentui/react-link@fluentui/react-list@fluentui/react-menu@fluentui/react-message-bar@fluentui/react-nav@fluentui/react-persona@fluentui/react-popover@fluentui/react-progress@fluentui/react-radio@fluentui/react-rating@fluentui/react-search@fluentui/react-select@fluentui/react-skeleton@fluentui/react-slider@fluentui/react-spinbutton@fluentui/react-spinner@fluentui/react-switch@fluentui/react-table@fluentui/react-tabs@fluentui/react-tag-picker@fluentui/react-tags@fluentui/react-teaching-popover@fluentui/react-textarea@fluentui/react-toast@fluentui/react-button@fluentui/react-toolbar@fluentui/react-tooltip@fluentui/react-treeAdditional context
No response
Have you discussed this feature with our team
@dmytrokirpa
Validations
Priority
High