Gutter

The Gutter component applies the standard horizontal spacing used by Payload views. Use it to align custom view content with the surrounding Admin Panel.

Import

Inside a Payload Admin Panel Custom Component:

1import { Gutter } from '@payloadcms/ui'

You can also import the component directly:

1import { Gutter } from '@payloadcms/ui/elements/Gutter'

Basic usage

Content aligned to the Admin Panel gutter

Loading component example…

Left and right padding are enabled by default. Negative gutters let a child extend through spacing already applied by a parent layout.

Common props

These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.

Prop	Type	Default	Description
`children` *	`ReactNode`	—	Content positioned within the gutter.
`left`	`boolean`	`true`	Applies the standard left padding.
`right`	`boolean`	`true`	Applies the standard right padding.
`negativeLeft`	`boolean`	`false`	Applies a negative left margin.
`negativeRight`	`boolean`	`false`	Applies a negative right margin.
`className`	`string`	—	Adds a custom class to the wrapper.

* An asterisk denotes that a prop is required.

Was this page helpful?

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

Gutter

Import

Basic usage

Common props

Link