You must be on @forge/react major version 10 or higher to use the latest version of UI Kit 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 apps, as all existing component APIs have been updated.

UI Kit components

UI Kit 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.

Components	Description
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.

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

Components	Description
Code	A code highlight for short strings in the body text.
Code block	A 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.

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

Components	Description
Badge	A visual indicator for numeric values, such as tallies and scores.
Empy state (Preview)	An empty state appears when there is no data to display and describes what the user can do next.
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.

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

Components	Description
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.

Components	Description
Empty state	An empty state appears when there is no data to display and describes what the user can do next.
Tabs	Tabs are used to organize content by grouping similar information on the same page.

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

Components	Description
Modal	A dialog that appears in a layer above the app’s UI and requires user interaction.
Popup (Preview)	A popup displays brief content in an overlay.

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

Components	Description
Calendar (Preview)	An interactive calendar for date selection experiences.
Checkbox	An input control that allows a user to select one or more options from a number of choices.
Checkbox group	A list of options where one or more choices can be selected.
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.
Inline edit (Preview)	An inline edit displays a custom input component that switches between reading and editing on the same page.
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.
Time picker (Preview)	A time picker allows the user to select a specific time.
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.

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

Components	Description
Heading	A typography component used to display text in different sizes and formats.
List (Preview)	A typography component used to display dot points or numbered lists.
Text	A typography component used to display body text.

Use these components to create visual representations of your data, making it easier to understand at a glance.

Charts	Description
Bar chart (EAP)	A visual representation of data using rectangular bars of varying heights to compare different categories or values.
Horizontal Bar chart (EAP)	A visual representation of data using horizontal rectangular bars of varying lengths to compare different categories or values.
Stack Bar chart (EAP)	A visual representation of data using rectangular bars of varying heights to demonstrate comparisons between categories of data.
Horizontal Stack Bar chart (EAP)	A visual representation of data using horizontal rectangular bars of varying lengths to demonstrate comparisons between categories of data.
Line chart (EAP)	A visual representation of data showing trends over time.
Pie chart (EAP)	A visual representation of data proportions in a circular format.
Single value chart (EAP)	A visualization representation of information with a single value as its metrics. The metric can be displayed with a increase/decrease indicator to display trends or changes over time.