Container

A page wrapper that centers content and constrains its maximum width.

Page content goes here

Usage#

import { Container } from "@backstage/ui";

<Container>
  {/* Your plugin's main content */}
</Container>

Container provides the standard page layout for plugin content. It constrains content to a maximum width, centers it horizontally, and adds consistent horizontal gutters. Use it once per page to wrap your main content area.

API Reference#

Prop	Type	Default	Description
children	ReactNode	-	Content to render inside the container.
className	string	-	Additional CSS class name for custom styling.
style	CSSProperties	-	Inline CSS styles object.
	00.5auto	-	Vertical spacing properties for controlling margin and padding.

Examples#

Responsive spacing#

Vertical spacing props accept breakpoint objects.

Content with vertical spacing

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-Container