Last updated Mar 3, 2025

User interface

On This Page

Build with UI Kit
Extend UI with custom options

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.

Identify extension points

Plan the way your Forge apps extend and interact with Atlassian products through extension points that are defined as modules.

Explore modules

Develop user interface

Develop the interface using pre-built UI Kit components or custom components.

Get started with UI

Build with UI Kit

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

Aligns with Atlassian Design System

Apply consistent visual language through pre-built components or style custom components, using design tokens.

Explore UI Kit components

React runtime

Run the app in a React runtime, which enables the use of various React features.

Explore UI Kit hooks

Easy component handling

Import components, customize their properties, and integrate runtime APIs.

Explore bridge APIs

Explore what’s possible

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

Example apps

Product	Name	Description
Bitbucket	Bitbucket related pull requests app	Adds 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.
Confluence	Page 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 the Jira global page module.
Jira	ITSM Jira issues dashboard	Displays an ITSM dashboard (with mocked data) that incorporates various types of data visualizations. This project features a Forge example app utilizing the new UI Kit data visualization components (EAP).

Tutorials

Create a quiz app

Learn about UI Kit primitives and components by developing an interactive quiz for Confluence.

Start tutorial

Add configuration to a macro

Add a configuration that enables users to customize what displays in a Confluence macro.

Start tutorial

Extend UI with custom options

Frame

The Frame component enables you to integrate additional features into existing UI Kit applications. It supports external libraries and frameworks, allowing you to expand your app's interface while maintaining compatibility with UI Kit.

It functions as a container for displaying static front-end applications, including HTML, CSS, and JavaScript, ensuring smooth integration with existing UI Kit elements. Use the Frame component to extend your UI Kit app interface or if your app needs a highly customized design, incorporates external libraries, or utilizes front-end frameworks other than React.

Learn more about Frame component

Create a logo designer app using the Frame component

Create an app that showcases a logo designer and renders a preview of the designed icon within the Frame component.

Start tutorial

Custom UI

If you are looking for full customization, you can use Custom UI to build interfaces from scratch using any front-end framework.

Learn more about Custom UI