Skip to main content


The Center component is a layout utility in the Pearl UI library. It is designed to center its child elements both vertically and horizontally. By default, it renders a Box element, which is a fundamental building block in Pearl UI.


import { Center } from "pearl-ui";


<Center height={100} backgroundColor="neutral.300">  This is the screen</Center>


Component Properties#

Supported Style Properties#

The Center component composes the Box component, which means you can pass all the props that you would normally pass to a Box component.