This page 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.

UI Kit 2 components

UI Kit 2 components help you build the user interface of your Forge app. Each component is described using a declarative markup language, which can be added to the App.js file of your app.

You can use the following components when building Forge apps:

Action

Components	Description
Button	A button that triggers an event or action.
Button Set	A button set displays multiple buttons together.

Content & image

Components	Description
Code	A code block of formatted code, highlighted in the body text.
Table	A table that displays data and other components.
Image	An image, which functions similarly to a native `img` element.
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

Components	Description
Badge	An inline visual indicator of a numeric value like a score or number of notifications.
Status lozenge	A visual indicator to display different status types or states.
Date lozenge	An inline component that displays a calendar date.
Section message	A text callout to alert users to important information.
Tag	A visual indicator for UI objects, which is useful for quick recognition and navigation.
Tag group	A group of tag components.

Layout

Components	Description
Inline	Inline is a primitive component based on React Native flexbox that manages the horizontal layout of direct children.
Stack	Stack is a primitive component based on the React Native flexbox that manages the vertical layout of direct children.

Components	Description
Tabs	A visual divider, used to organize content by grouping similar information into tabs on the same page.
Link	An inline component that displays a link.

Overlays

Components	Description
Inline dialog	A dialog that displays outside a block of content in a Confluence page.
Modal dialog	A dialog that appears in a layer above the app’s UI and requires user interaction.
Tool tip	A small pop-up box that provides additional information or context when hovering over a component.

Selection & input

Components	Description
Form	A form that allows a list of components, a submit button, and a function that handles the submit event.
Checkbox & checkbox group	A logical group of Checkbox components.
Date picker	A component that allows users to select a date from a calendar.
Radio and radio group	A group of radio buttons that allows single option selection.
Range	A slider component that allows users to select a value within a specified range.
Select	A dropdown menu that allows users to select an option from a list.
Text area	A multi-line text input field.
Text field	A single-line text input field.
Toggle	A component that allows users to switch between two states, typically on/off or true/false.
User picker	A component that allows users to search and select users from a list.

Typography

Components	Description
Heading	A piece of text at the top of a page or section.
Text	A piece of plain text with basic text formatting options.