Skip to main content

Center

A Box preset with align="center" and justify="center". Centers its children both horizontally and vertically within its own bounds. Useful for empty states, single-icon placeholders, or any content that should sit in the middle of a fixed-size area regardless of its own size.

No results found

<Center bg="surface" borderColor="border" borderWidth={1} w={240} h={140} rounded="r-3">
  <Text variant="bodySmall" color="textMuted">
    No results found
  </Text>
</Center>

Props​

Center accepts every Box prop except align and justify default to 'center' (they can still be overridden). See Box's props for the full list, including gap, spacing (m*/p*), bg, rounded, and dimension props.