Last updated Apr 16, 2024

User interface

Design and build a user-friendly interface for your app. Start by exploring extension points to identify which part of the product you want to build an app for, and then develop the user interface using pre-built or custom components.

  • Identifying extension points: Plan the way your Forge apps extend and interact with Atlassian products through extension points. These extension points are defined as modules in your app manifest. Learn more about modules
  • Develop the user interface: Develop the interface using pre-built UI Kit components or custom components.

Build with UI Kit

UI Kit offers a wide range of pre-built, customizable components for the Forge platform. This allows you to build rich app experiences that align with the Atlassian Design System, the visual language used across all Atlassian products.

  • React components: UI Kit runs the app in a React runtime which enables you to use some React features.
  • Aligns with Atlassian Design System: Apply consistent visual language through pre-built components or style custom components using design tokens.
  • Quick and easy: Import components, customize properties, and integrate runtime APIs to securely integrate with Atlassian products. That’s it!

Learn more about UI Kit

Explore what’s possible

Explore example apps and tutorials for various Atlassian products to create apps using UI Kit.

Example apps

ProductNameDescription
Bitbucket Bitbucket related pull requests appAdds a pull request card that displays pull requests related to the one you're viewing, based on the Jira tickets mentioned in the title of the current pull request.
ConfluencePage approver app with UI Kit Allows the easy approval or rejection of a Confluence page through the Confluence content byline item module.
Jira Project introduction app with UI Kit Displays a summary of the project's objective and milestones using Jira global page module.

Tutorials

ProductNameDescription
ConfluenceCreate a UI Kit Quiz App for ConfluenceCreate a playable quiz in Confluence using UI Kit primitives and components

Build with Custom UI

If your app requires a highly customized interface, external libraries or you want to build using frontend frameworks other than React, you can build the interface using Custom UI. With this option, Forge platform hosts your static resources, enabling your app to display custom UI on Atlassian products.

Learn more about Custom UI

Rate this page: