Atlaskit on Forge

Could anyone please point me to examples of using atlaskit in Forge? Created a custom-ui component but nothing including the seems to work.

Thanks in advance :slight_smile:


Please, see: Bitbucket

package.json: Bitbucket

For more examples see:

Thanks @OnucheIdoko1 . I included all the packages in the JSON.

In my App.js and RoleDisplay.js of the Custom UI component, I have

import { invoke } from "@forge/bridge";
import ForgeUI, { Text } from "@forge/ui";

const App = () => {

if (!isFetched) {
   return (<div><h4><Text>Loading...</Text></h4></div>)

return (<div><Text>This should work?</Text></div>)


But I get the below warning and the font displayed is the default browser font and not the expected Atlassian typography.

Warning: <Text /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
>     in Text (at RoleDisplay.js:11)
>     in h4 (at RoleDisplay.js:11)
>     in div (at RoleDisplay.js:10)
>     in div (at RoleDisplay.js:6)
>     in RoleDisplay (at App.js:62)
>     in Display (at App.js:66)
>     in App (at src/index.js:5)


Seems you using <Text> from Forge UI kit in your custom UI application.

I cannot use the Forge UI kit in Custom UI (I stand to be corrected though).

Instead of import ForgeUI, { Text } from "@forge/ui"; import a fitting package from Atlaskit instead.

See: Atlaskit by Atlassian and Overview - Components - Atlassian Design System

@DecreeLabs are you using React to build your Custom UI?

@OnucheIdoko1 yes I am using React.

so your imports should look something like this in your Custom UI:

import React, { useState, useEffect, useCallback } from 'react';
import { invoke } from '@forge/bridge';
import SectionMessage from '@atlaskit/section-message';

@OnucheIdoko1 tried everything but no lock :frowning: I’ve created a new post at Help with Forge Custom UI AtlasKit and Styling with a link to a Github repo)

Thanks so much for trying to help really appreciate it.