Frame is a simple layout utility for rendering and positioning its content.
Supports simple flexbox alignment properties
Works with any content


Frame should is primarily used for adding simple layout styles for the content. It works great in cases where you need to compose components content manually and can be used with other layout utilities like Stack. For instance, if you're using a Card component without padding, you can then use Frame to set the padding you need. This lets you add full-width images to the Card but still keep the content padded.

Frame uses the padding value you pass as a multiplier for the unit design tokens. This means that with the default theme, padding={4} would resolve to 16px padding.

You can define different horizontal and vertical padding values with an array syntax, like you would do in CSS. First array value will be responsible for vertical padding and second for horizontal.

Frame supports different types of the content alignment, including text alignment. Its display gets switched to flex when used with align and/or justify properties.


Frame border and background colors can be defined using our color token values:


Border radius of the frame support radius design tokens as well. Since border radius crops the children elements, you might also want to use overflow="hidden" to the Frame.

You can define Frame's height and width by passing any css value to them. This includes passing values like 100% or var(--arcade-unit-x10) etc.


You can use as property to render Frame as a custom HTML tag.


alignstart, center, end-false
justifystart, center, end-false
textAlignstart, center, end-false
backgroundColorneutral-faded, critical-faded, positive-faded, primary-faded, page-faded-false
borderColorneutral, neutral-faded, positive, critical, primary-false
borderRadiussmall, medium, large-false
widthstring, number-false
heightstring, number-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element