Center

Horizontally and vertically center content

Centered

import { Center } from '@/components/center';

export default function CenterPreview() {
  return (
    <Center className="aspect-square w-64 rounded-xl border border-border">
      <span className="text-foreground-secondary text-sm">Centered</span>
    </Center>
  );
}

Dependencies

Slot

Source Code

import { Slot } from '@/components/slot';
import { cn } from '@/lib/utils/classnames';

interface CenterProps extends React.ComponentPropsWithRef<'div'> {
  asChild?: boolean;
  inline?: boolean;
}

const Center = ({ ref, className, asChild, inline, ...rest }: CenterProps) => {
  const Comp = asChild ? Slot : 'div';
  return (
    <Comp
      ref={ref}
      className={cn(
        inline ? 'inline-flex' : 'flex',
        'items-center justify-center',
        className
      )}
      {...rest}
    />
  );
};

export type { CenterProps };
export { Center };

Server component. No 'use client' — layout primitive (flex centering + Slot); no hooks or own handlers.

Center is a tiny utility primitive that centers a single child both axes.

Anatomy


          <Center>
  {child}
</Center>

API Reference

Extends the div element.

Prop	Default	Type
`inline`	-	`boolean`
`asChild`	-	`boolean`

Examples

Default

Centered

import { Center } from '@/components/center';

export default function CenterPreview() {
  return (
    <Center className="aspect-square w-64 rounded-xl border border-border">
      <span className="text-foreground-secondary text-sm">Centered</span>
    </Center>
  );
}

Calendar

Chart