Create rich user experiences in Forge
10 min
Beginner
By the end of this lesson, you’ll be able to:
- Use and customize common UI Kit components and their properties.
- Build advanced layouts and use the Atlassian design system with UI Kit style and layout components.
UI Kit makes building user experiences in Forge easy
A well-designed and intuitive user experience is just as important as the app’s functionality when building Forge apps.
UI Kit is the primary framework Atlassian recommends for building user interfaces in Forge apps. It supports native React, enabling developers to build interactive, responsive interfaces that look and feel like Atlassian apps out of the box.
By following Atlassian Design System principles, UI Kit apps stay visually consistent with the rest of the Atlassian ecosystem, even as Atlassian’s design evolves. This lets you build apps that are easier to create, maintain, and scale, which aligns with Forge's “easy-to-build” philosophy.
👇UI Kit elements come together to create the user interface.
Build with blocks that feel native
UI Kit components are like building blocks from which you can craft your UI. You don’t need to create buttons, input fields, or dropdown menus from scratch. Forge gives you ready-made pieces that already look and behave like native Jira or Confluence elements and conform to Atlassian’s design standard.
Each component is highly configurable. You can change labels, adjust the layout, and set behaviors based on user interaction. Here is a list of UI Kit components you can use.
👇 Create a simple form with a text field and a submit button.
Create clear, responsive layouts
Good user experiences aren’t just about what components you use, but also how you arrange them. UI Kit’s layout includes components like: box, stack, and inline to help you organize content in a way that’s both visually appealing and functionally clear.
👇Arrange components horizontally using inline.
👇Arrange components vertically using stack.
👇Or arrange components using both inline and stack.
There is no need to worry about CSS or screen responsiveness; UI Kit handles everything for you. Whether you're grouping form fields, aligning labels and buttons, or laying out an interactive panel, UI Kit makes it easy to design apps that look professional and adapt well to different screen sizes.
How was this lesson?
next lesson
Automate workflows with Forge
- Why automate with Forge?
- Trigger actions from product events
- Build more complex custom automation rules