Center

Used to center its child within itself.

Source: packages/chakra-ui-solid/src/components/centerChakra UI ↗

This will be centered

import { Box, Center } from "chakra-ui-solid";

export default function CenterBasic() {
  return (
    <Center bg="bg.emphasized" h="100px" maxW="320px">
      <Box>This will be centered</Box>
    </Center>
  );
}

Usage

import { Center, Circle, Square } from "chakra-ui-solid";

<Center bg="tomato" h="100px" color="white">
  This is the Center
</Center>

Examples

Icon

Center can be used to create frames around icons or numbers.

import { Box, Center, HStack } from "chakra-ui-solid";

/** Chakra's example frames a `react-icons` icon; no Icon component has shipped here yet. */
const Dot = () => (
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <circle cx="12" cy="12" r="6" fill="currentColor" />
  </svg>
);

export default function CenterWithIcons() {
  return (
    <HStack>
      <Center w="40px" h="40px" bg="red.solid" color="red.contrast">
        <Dot />
      </Center>

      <Center w="40px" h="40px" bg="red.solid" color="red.contrast">
        <Box as="span" fontWeight="bold" fontSize="lg">
          1
        </Box>
      </Center>
    </HStack>
  );
}

Center with Inline

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.

Visit chakra-ui-solid

import type { JSX } from "@solidjs/web";
import { Box, Center } from "chakra-ui-solid";

const Arrow = () => (
  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
    <path d="M8 4l10 8-10 8z" fill="currentColor" />
  </svg>
);

export default function CenterWithInline() {
  return (
    <Box
      color="fg"
      render={(props) => (
        <a {...(props as JSX.AnchorHTMLAttributes<HTMLAnchorElement>)} href="#usage">
          {props.children}
        </a>
      )}
    >
      <Center inline gap="4">
        <Box>Visit chakra-ui-solid</Box>
        <Arrow />
      </Center>
    </Box>
  );
}

Square

Square centers its child within a fixed-size container of equal width and height. It accepts a size prop that sets both width and height to the same value.

import { Square } from "chakra-ui-solid";

const Dot = () => (
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <circle cx="12" cy="12" r="6" fill="currentColor" />
  </svg>
);

export default function CenterWithSquare() {
  return (
    <Square size="10" bg="purple.700" color="white">
      <Dot />
    </Square>
  );
}

Circle

Circle extends Square by adding borderRadius="9999px" to create a perfect circle. Like Square, it accepts a size prop that sets both width and height to the same value.

import { Circle } from "chakra-ui-solid";

const Dot = () => (
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <circle cx="12" cy="12" r="6" fill="currentColor" />
  </svg>
);

export default function CenterWithCircle() {
  return (
    <Circle size="10" bg="blue.700" color="white">
      <Dot />
    </Circle>
  );
}

Props

Center

Prop	Default	Type
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

inline is a recipe variant rather than a member of that interface, so it does not appear in the table: pass it to switch display from flex to inline-flex.

Square

Prop	Default	Type
`size`	—	`SystemProperties['width']` The width and height of the square — one value for both, taking whatever `width` takes.
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: Omit<HTMLChakraProps<"div">, "size">. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.

Circle

Circle extends Square and accepts all the same props. The only difference is that Circle applies borderRadius="9999px".

Prop	Default	Type
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: SquareProps. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.