Center

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

Centered Content

Code

import Center from '@ignix-ui/center';

<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>

Installation

CLI

ignix add component 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 '@ignix-ui/center';

Basic Usage

function BasicCenter() {
  return (
    <Center horizontal vertical>
      <p>Centered Text</p>
    </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).