Center

Overview

The Center component is a utility wrapper that helps you center its children horizontally, vertically, or both.
It supports different positioning strategies (flex, grid, absolute) and configurable minHeight.

Preview

Preview

Centered Content

Code

import Center from './components/ui';

function Example() {
  return (
    <Center horizontal vertical variant="flex" minHeight="150px">
      <div>Centered Content</div>
    </Center>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add center

yarn

yarn @mindfiredigital/ignix-ui add center

pnpm

pnpm @mindfiredigital/ignix-ui add center

manual

import React from "react";
import clsx from "clsx";

interface CenterProps {
children: React.ReactNode;
horizontal?: boolean;
vertical?: boolean;
variant?: "flex" | "grid" | "absolute";
minHeight?: "auto" | "xs" | "small" | "medium" | "large" | "xl" | "screen" | string | number;
className?: string;
}

const Center: React.FC<CenterProps> = ({
children,
horizontal = false,
vertical = false,
variant = "flex",
minHeight = "auto",
className = "",
}) => {
const minHeightClasses: Record<string, string> = {
auto: "",
xs: "min-h-[100px]",
small: "min-h-[200px]",
medium: "min-h-[300px]",
large: "min-h-[400px]",
xl: "min-h-[500px]",
screen: "min-h-screen",
};

const resolvedStyle: React.CSSProperties =
typeof minHeight === "string" && minHeight in minHeightClasses
  ? {}
  : { minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight };

const variantClasses: Record<string, string> = {
flex: clsx("flex", {
  "justify-center": horizontal,
  "items-center": vertical,
}),
grid: clsx("grid", {
  "place-items-center": horizontal && vertical,
  "justify-center": horizontal && !vertical,
  "items-center": vertical && !horizontal,
}),
absolute: clsx("absolute inset-0 flex", {
  "justify-center": horizontal,
  "items-center": vertical,
}),
};

return (
<div
  className={clsx(
    variantClasses[variant],
    typeof minHeight === "string" ? minHeightClasses[minHeight] ?? "" : "",
    className
  )}
  style={resolvedStyle}
>
  {children}
</div>
);
};

export default Center;

Usage

Import the component:

import Center from './components/ui';

Basic Usage

function BasicCenter() {
  return (
    <Center horizontal vertical>
      <p>Centered Text</p>
    </Center>
  );
}

Variants

Preview

Centered Content

Code

<Center
  variant="flex"
  horizontal={true}
  vertical={true}
  minHeight="150px"
>
  <div className="bg-red-800 text-white px-4 py-2 rounded-lg shadow">
    Centered Content
  </div>
</Center>

Props

Prop	Type	Default	Description
horizontal	boolean	false	Centers children horizontally.
vertical	boolean	false	Centers children vertically.
variant	"flex" | "grid" | "absolute"	"flex"	Layout strategy used for centering.
minHeight	"auto" | "screen" | "large" | custom| "small"| "medium"	"auto"	Minimum height constraint (auto, screen, custom).