Center

Used to center elements.

Box One

import { Center, Text } from '@fidely-ui/react'

export const CenterBasic = () => {
  return (
    <Center>
      <Text>Box One</Text>
    </Center>
  )
}

Usage

import { Center } from '@fidely-ui/react'

<Center>Hey there</Center>

Examples

With Height

Box One

import { Center, Text } from '@fidely-ui/react'

export const CenterHeight = () => {
  return (
    <Center height={'200px'} bg={'bg.subtle'}>
      <Text>Box One</Text>
    </Center>
  )
}

With Image

import { Box, Center, Image } from '@fidely-ui/react'

export const CenterWithImage = () => {
  return (
    <Center>
      <Box>
        <Image
          boxSize="200px"
          fit="cover"
          src="https://i.pravatar.cc/250?img=10"
          alt="John Doe"
        />
      </Box>
    </Center>
  )
}

Use the inline prop to make Center behave like an inline element (display: inline-flex) instead of a block-level element (display: flex). This makes Center only take up as much width as its content needs, allowing it to fit inside links, buttons, or other inline contexts without breaking the layout.

Box One

import { Center, Text } from '@fidely-ui/react'

export const CenterInline = () => {
  return (
    <Center inline>
      <Text>Box One</Text>
    </Center>
  )
}

Props

The center component accepts the following properties:

inline: Whether to use inline-flex or flex for the container. The value is a boolean.