On this page

Center

A layout component that centers its children both horizontally and vertically.

import { Center } from "@ninna-ui/layout";

pnpm add @ninna-ui/layout@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Center component.

import { Center } from "@ninna-ui/layout";

export default function Example() {
  return (
    <Center className="h-screen">
      <Spinner />
    </Center>
  );
}

Basic

Center content in a container.

Live preview/ Default

Centered Content

Inline

Use inline-flex for inline centering.

Live preview/ Default

inline=false (default)

Centered

Takes full width

inline=true

🎯

Shrinks to content

Use Cases

Common patterns using Center.

Live preview/ Default

Loading State

Empty State

📭

No items found

Icon Button

Hero Section

Welcome

Centered hero content

API Reference

Complete list of props.

Props

Prop	Type	Default	Description
`as`	`ElementType`	`—`	Semantic HTML element to render
`inline`	`boolean`	`false`	Use inline-flex instead of flex
`className`	`string`	`—`	Additional CSS classes
`children`	`React.ReactNode`	`—`	Content to center

Accessibility

Center is a pure layout component with no semantic meaning
Useful for loading states, empty states, and hero sections
Ensure centered content remains accessible at all viewport sizes