UI Kit 2 components
UI Kit 2 hooks
Product bridge APIs
Jira bridge APIs
Upgrade to latest UI Kit 2
Previous versions

This section describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

You must be on @forge/react major version 10 or higher to use the latest version of UI Kit 2 components.

To upgrade your app to the latest version, run npm install --save @forge/react@latest in your terminal.

Upgrading to the latest version may contain breaking changes for existing UI Kit 2 apps, as all existing component APIs have been updated.

About UI Kit 2

UI Kit 2, our latest offering for building the user interface of your Forge app, brings a range of new features and benefits. It provides the same benefits of UI kit, such as native rendering and ease of use, but with enhanced performance and features.

With UI Kit 2, user interactions become faster than what is currently possible in UI kit. Your app no longer needs to invoke a lambda function on every state change.

Performance features include:

Components

Explore UI Kit 2 components, which are reusable building blocks designed to streamline the development of user interfaces.

React runtime

UI Kit 2 runs the app in a React runtime which enables you to use some React features.

Hooks

To import hooks to your app:

import React, { <hook name>} from 'react';

You should be able to use any React hooks that do not rely on an underlying DOM node or depend on any synchronous operations in the browser’s event loop. Hooks are now imported from react.

Supported hook types

  • useState

  • useEffect

  • useContext

  • useReducer

  • useCallback

  • useMemo

  • useRef

  • useDebugValue

  • useDeferredValue

  • useId

For more information on Hooks, see the Hooks API Reference official page.

Context

Forge UI Kit 2 allows you to use the React context in your apps. For more information, see Context - React documentation.

JSX support

Limitations

You won’t have access to any of the underlying DOM, so features that depend on that will not work. This includes portals and forwarding refs. You also still cannot use arbitrary HTML, and are restricted to using the components exported from @forge/react.

API requests

Making API requests in UI Kit 2 is the same as in Custom UI, due to their similar frontend/backend architecture, as opposed to UI Kit where all requests are made from the lambda.

Whether a request is made from the client side or from the lambda, depends on the request type.

Product fetch requests

Product fetch requests can be made in the frontend through @forge/bridge, i.e. in your App.js file. See Custom UI requestJira and Custom UI requestConfluence for documentation.

Non-product fetch requests and the storage API

These requests will need to go through the lambda, and so you will need to set up a Resolver. See Custom UI resolver. In UI Kit, these would have been intertwined with the rest of your app UI, but that is not the case with UI Kit 2.

Getting product context

Retrieve product context via the getContext method on @forge/bridge. See Custom UI view.

1
2
import { view } from '@forge/bridge';
const context = await view.getContext();

Known limitations and issues

Issues

  • Using TypeScript for resolver files causes deployment failures. You will get an error like TS2304: Cannot find the name “Forge UI“ when doing a forge deploy. You can work around this by adding a rule into the tsconfig.json file to only include the src file.
  • TextField is not rendering correctly (for example, not showing the default value if set).

Limitations

Supported products and their modules

UI Kit 2 supports all Forge products and modules. However, it does not yet support:

Rate this page: