Components / Layout

Center

Center is a Box that centres its children on both axes. Reach for it when the layout intent is "put this thing in the middle" — the long-form Box would say the same with more noise.

Loading playground…

What it is

A <Box display="flex" alignItems="center" justifyContent="center">. Center accepts every Box prop, so width, height, padding, background — all the usual styling — works normally.

Install

Center is exported from usemotif. No separate install.

example.tsx

import { Center } from 'usemotif';

API

Center

stable

function Center(props: CenterProps): JSX.Element

…BoxPropsBoxProps

Every prop Box accepts. `display`, `alignItems`, and `justifyContent` are managed by Center; setting them in props overrides those defaults.

Examples

Centre a loading spinner on a panel:

example.tsx

<Center h={240} bg="$colors.surface.muted">
<Spinner />
</Center>

Empty-state panel:

example.tsx

<Center minH={320} p="$8">
<VStack gap="$3" alignItems="center">
  <Heading>No results</Heading>
  <Text>Try a different filter.</Text>
</VStack>
</Center>