Use Atlassian Design system within Forge

Forge Forge UI Kit and Custom UI
1

Hi,

I’m trying to use the Atlassian Design system within my Forge app, I’m referencing the documentation here: ‎‎Develop - Get started - Atlassian Design System and trying to use the Button component. My app loads the correct market from ‘@atlaskit/button’ but the styles are not loaded. Do I need to mess with the webpack config to use styled components? or should this work out of the box.

When I follow the exact same steps using Create React App directly, everything works as expected.

App.js:

import React from 'react';
import Button from '@atlaskit/button';

function App() {
  return (
    <div>
      <Button appearance="primary">Primary button</Button>
    </div>
  );
}

export default App;

Screenshot 2023-04-24 at 9.30.30 am
Screenshot 2023-04-24 at 9.30.30 am1242×374 2.74 KB

2

Hey @DanielRichter

Welcome to the community. Glad to see you getting started on your journey with Forge.

Firstly, I would like to clarify few things here:

  • Forge app can be created ONLY using the development kit provided by us. You can get an overview of how different parts of Forge platform works here.
  • While your thought process of using Atlassian Design system with React app is correct, it doesn’t work that way in Forge.

The way the UI works in Forge is a little different. Forge has its own UI kit which works in similar ways as mentioned in your example as they too are React components. The difference being, we have provided the components which are already aligned with Atlassian product guidelines, but are still customisable. You can learn more about Forge UI kit here.

To help you even further, I would recommend you checkout our example apps where you can play around with already working apps. play with its code and see how the UI is built.

Happy building :slight_smile:

3

Hi,

Thank you for your response. I was hoping to utilise more advanced components than are available within the Forge UI kit. As I understand, I’m still free to create my own custom components and replicate designs from the Atlaskit using my own CSS, but I cannot import them directly.

Thank you

4

Yeah, in that case, you will find custom UI helpful. And yes, you can’t import your designs from external sources as the Forge apps with custom UI comes with Content Security Policy and this ingress of assets is a limitation.

5

Hi @DanielRichter , to get atlaskit styles to work in Custom UI, you will need to add the following to your manifest:

permissions:
  content:
    styles:
      - 'unsafe-inline'