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 offers a wide range of pre-built and customizable components that align with Atlassian's design standards.
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 |
|---|---|
| ADF renderer | A renderer for ADF documents. |
| 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. |
| Comment (Preview) | A comment displays discussions and user feedback. |
| 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 |
| 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. |
| Empty 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. |
| Pressable (Preview) | A pressable is a primitive for building custom buttons. |
| 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 | A visual representation of data using rectangular bars of varying heights to compare different categories or values. |
| Donut chart | A visual representation of data in a donut format. |
| Horizontal bar chart | A visual representation of data using horizontal rectangular bars of varying lengths to compare different categories or values. |
| Stack bar chart | A visual representation of data using rectangular bars of varying heights to demonstrate comparisons between categories of data. |
| Horizontal stack bar chart | A visual representation of data using horizontal rectangular bars of varying lengths to demonstrate comparisons between categories of data. |
| Line chart | A visual representation of data showing trends over time. |
| Pie chart | A visual representation of data proportions in a circular format. |
Rate this page: