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 |
---|---|
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 |
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. |
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 |
---|---|
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. |
Use selection and input components to allow users to enter information or choose options in your app.
Components | Description |
---|---|
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. |
Use typography components to manage the style and appearance of text within your app.
Rate this page: