Center

Center displays a container that places it's content in the center.

Import

import { Center } from "@prismane/core";

Usage

<Center h={120} bg="primary" grow>
  This will be centered on both axis.
</Center>

As A Frame

Center component can be used to frame different items and automatically center them.

<Center w={64} h={64} bg="primary">
  <Heart size={24} />
</Center>

Page Example

Center has a very common use case to easily center content on a page.

<Center w="100%" h="20vh" direction="column" gap={fr(4)} ta="center">
  <Text as="h1" fs="3xl">
    Ooops... We ran into a problem!
  </Text>
  <Text>Our team is working hard to fix the problems as soon as possible!</Text>
  <Link href="#" cl="primary" mt={fr(8)}>
    Go back to home
  </Link>
</Center>

Versatile Component

<Center
  as="a"
  href="https://www.google.com"
  target="_blank"
  w={120}
  h={60}
  bg="base"
>
  Click Me
</Center>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Center

Go BackCard

Up NextCheckbox