Can I use UI Kit Components inside a Custom UI Module?

Forge Forge UI Kit and Custom UI
1

The necessities of an app I’m building, require me to use Custom UI to build a Confluence Global Page (I want to use Accordions, and other customized stuff). However, I’d still like to keep things close to Atlassian’s look and feel and reuse React Components available in the UI Kit. In particular, things link User, Dynamic Table, LoadingButton, etc.

Is it possible to import UI Kit Components into my React-based Custom UI application? When I try to do it, I get warnings telling me that the Components are unrecognized in this browser. Is there any trick to this?

Sample code:

import { createRoot } from 'react-dom/client';
import React, { useState } from 'react';
import { User, Button, Stack } from '@forge/react';

function App () {
    const [count, setCount] = useState(0);

    return (
        <React.Fragment>
            <Stack>
                <h1>My HTML header!</h1>
                <User accountId="<redacted>"/>
                <Button onClick={() => setCount((count) => count + 1)}>
                    count is {count}
                </Button>
            </Stack>
        </React.Fragment>
    );
}

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Warnings in console:

Warning: <User /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
User
Stack
App@http://localhost:8000/src/App.jsx?t=1754387706662:23:37 react-dom.development.js:86:30
Warning: The tag <User> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
User
Stack
App@http://localhost:8000/src/App.jsx?t=1754387706662:23:37 react-dom.development.js:86:30
Warning: React does not recognize the `accountId` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `accountid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
User
Stack
App@http://localhost:8000/src/App.jsx?t=1754387706662:23:37 react-dom.development.js:86:30
Warning: <Button /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Button
Stack
App@http://localhost:8000/src/App.jsx?t=1754387706662:23:37 react-dom.development.js:86:30
Warning: <Stack /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Stack
App@http://localhost:8000/src/App.jsx?t=1754387706662:23:37 react-dom.development.js:86:30
Warning: The tag <Stack> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Stack
App@http://localhost:8000/src/App.jsx?t=1754387706662:23:37

One interesting detail is that the page is still rendered, but there are no styles in place.

As I was writing this post, I remembered to check Atlassian’s Design System.
And alas, importing those @atlaskit modules allows me to use all of Atlassian Design System’s Componentes, which is wonderful.

However some useful components (like the User Component from the UI Kit) are still missing, therefore the question stands:

Is it possible to import UI Kit Components into a React-based Custom UI Application?