Center

Layout

Centers content both horizontally and vertically.

Preview

Centered content ✨

Usage

example.jsx

import { Center } from "@/components/ui/center";

export default function Example() {
  return <Center />;
}

Source Code

Copy this file into components/ui/center.jsx in your project.

center.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Center = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center justify-center", className)} {...props} />
));
Center.displayName = "Center";

export { Center };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge