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.

UI Kit 2

UI Kit 2 offers a wide range of pre-built and customizable components that align with Atlassian's design standards.

Action

Use action components to initiate or execute specific tasks within your app.

ComponentsDescription
Button

A button that triggers an event or action.

Button group

A button group displays multiple buttons together.

Link

A component for displaying inline links.

Content & image

Use content and image components to display text, visuals, and other data in your app.

ComponentsDescription
CodeA code highlight for short strings in the body text.
Code blockA code block highlights an entire block of code and keeps the formatting.
Dynamic table

A table that displays rows of data with built-in pagination, sorting, and re-ordering functionality.

Image

An image, which functions similarly to a native img element.

Icon

A visual representation for actions or other items.

User

A representation of a user, displaying details such as name and profile picture.

User group

A stack-like entity that encompasses multiple users, including their names and profile pictures.

Feedback

Use feedback components to provide users with responses or notifications based on their actions in your app.

ComponentsDescription
Badge

A visual indicator for numeric values, such as tallies and scores.

Lozenge

A visual indicator to display different status types or states.

Progress bar

A progress bar communicates the status of a system process.

Progress tracker

A progress tracker displays the steps and progress through a journey.

Section message

A text callout to alert users to important information.

Spinner

A spinner is an animated spinning icon that lets users know content is being loaded.

Tag

A visual indicator for UI objects for quick recognition.

Tag group

A group of tag components.

Tooltip

A floating, non-actionable label used to explain a user interface element or feature.

Primitives

Use layout components to structure and organize elements within your app.

ComponentsDescription
Box

A box is a generic container that provides managed access to design tokens.

Inline

An inline manages the horizontal layout of direct children using flexbox.

Stack

A stack manages the vertical layout of direct children using flexbox.

XCSS

A styling API that integrates with Atlassian's design tokens and primitives.

Use navigation components to assist users in navigating and interacting with different sections of your app.

ComponentsDescription
Tabs

Tabs are used to organize content by grouping similar information on the same page.

Overlays

Use overlay components to highlight certain areas or display additional information in your app.

ComponentsDescription
Modal

A dialog that appears in a layer above the app’s UI and requires user interaction.

Selection & input

Use selection and input components to allow users to enter information or choose options in your app.

ComponentsDescription
Checkbox

An input control that allows a user to select one or more options from a number of choices.

Date picker

A date picker allows the user to select a particular date.

Form

A form component that allows for the inclusion of a list of components, a submit button, and a function that handles the submit event.

Radio

A radio input allows users to select only one option from a number of choices.

Radio group

A radio group presents a list of options where only one choice can be selected.

Range

A range lets users choose an approximate value on a slider.

Select

A dropdown field that allows users to select an option from a list.

Text area

An input field that lets users enter long form text, which spans over multiple lines.

Text field

An input field that allows a user to write or edit text.

Toggle

A component that allows users to switch between two states, such as on/off or true/false.

User Picker

A dropdown field that allows users to search and select users from a list.

Typography

Use typography components to manage the style and appearance of text within your app.

ComponentsDescription
Heading

A typography component used to display text in different sizes and formats.

Text

A typography component used to display body text.

Rate this page: