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:

• Work shifts to the browser for a lightning-fast user experience.
• More React features are now available. Instead of using the UI kit's React-like features, you can now access certain capabilities directly from React.

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:

• Confluence macro:export (prop only)