Add UI Kit Page Layout component

Hi there,

I was adding a Jira global page and wanted to do it with UI Kit. But I am missing some components to do structured page layout.
Would be nice to have at least feature parity to the Custom UI / Atlaskit (https://atlassian.design/components/page-layout/examples)
Right now, I used the Frame Component to build my page with CustomUI (which worked, but oudl be nicer to do it all in UI Kit)

Cheers,
paul

Hi Paul,

UI Kit now includes some components for assisting you with layout, but they work a little differently to the Atlassian Design elements.

In UI kit you have access to the following components to create your layout:

The Box component is a generic container that provides access to design tokens.
The Inline component manages the horizontal layout of children using flexbox.
The stack component manages the vertical layout of children using flexbox
And the xcss component is a styling API that utilises Atlassian Design tokens.

Combining these components allows you to build a layout.

Is there a particular layout you’re looking to create?

If this has answered your question, please can you mark this as the solution?

Cheers!
Melissa

1 Like

Hi Melissa,

thanks for your answer.

I’ve reviewed the components mentioned, but they seem more suited for smaller elements like custom field values or panels, rather than building a complete and complex page (e.g., project or admin pages).

Perhaps it’s just a matter of getting accustomed to the UI Kit after working with Custom UI. I’ll explore further and keep you updated as I go.

Cheers,
paul

P.S. One feature I’d really like to see is support for viewport-based sizing (e.g., vw or vh units). It would be great if this could be incorporated: Viewport Lengths in xcss.