---
# System prepended metadata

title: 'UI Builder - support for 3rd party component libraries [July 20]'
tags: [pitch]

---

---
robots: noindex, nofollow
tags: pitch
---

# UI Builder - support for 3rd party component libraries [July 20]

### Problem
UI Builder still supports Fluent0 components only, no other component libraries.

### Appetite
Untangle Builder UI from the components being dropped into the canvas.
Add support for 3rd party libraries.

### Solution
- Add support for components other than Fluent0
    - Fluent0 icons
    - Fluent7
    - (Product components)
- During the development, identify issues and create backlog to be able so scale out the work

### Risks (Rabbit holes)
There are multiple stages for 3rd party components support - from manual - we need to change UI builder sources to add another UI library - to fully automated - just specify a name of NPM package and components will be added automagically. Anything more than a basic support will require machine readable components description - see [Component Info JSON Files](https://hackmd.io/gAXEpxxMRnC3XqCr-lGGwA) project.

There are several Component Info generation efforts - talk to Elizabeth, Levi, Hudson.
- Hudson: [Add react-docs package](https://github.com/microsoft/fluentui/pull/12254)
- Elizabeth: [Add react-docgen package](https://github.com/microsoft/fluentui/pull/12897)
  - builds off Hudson's PR but with perf optimizations and hopefully clearer API
  - also has separate `getConformanceInfo` for tests, which would have to change due to Esteban's more recent work on `react-conformance`
- Elizabeth: [Use react-docgen in build/docs](https://github.com/microsoft/fluentui/pull/12898)
- Elizabeth: [Use react-docgen in tests](https://github.com/microsoft/fluentui/pull/12899)
  - This would have to change somewhat due to Esteban's work

### Out of scope (No-gos)
- Limiting what component can be dropped into what component.
    - You can break things the same way when writing code directly.
