Combine Custom UI (react components) with @forge/react UI Kit

Hello folks :slight_smile:

Wondering if it is possible to combine Custom UI (React app) with UI Kit components : https://developer.atlassian.com/platform/forge/ui-kit-2/all-components/

For example, displaying User component from UI Kit in a react Custom UI

import React, {useEffect, useState} from 'react';
import {User} from '@forge/react';
function App() {
    return (
        <div>
            <span>Labels : </span>
            <User accountId="712020:20d3f633-dffg-4df4-91e5-3ee9f95f73e9"/>
            <div>Additional details : </div>
        </div>
    );
}

The following renders the div and span, however not displaying User, and in the console the following warnings are displayed

bundle.js:30714 Warning: <User /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    in User (at App.js:44)
    in div (at App.js:41)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)
********************************************************************************
bundle.js:30714 Warning: The tag <User> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    in User (at App.js:44)
    in div (at App.js:41)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

It is even possible to use UI Kit component in a react Custom UI ?

Thanks for any suggestions!

It if is specifically about the user component, then probably try Avatar item https://atlassian.design/components/avatar/avatar-item/examples#text

1 Like

Thanks for the reply and link to the design system :slight_smile:

It is not strictly related to the User component , but in general is it possible to mix Custom UI (react) with UI kit ?

Thanks