Center

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

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

pnpm add @ninna-ui/layout

Requires @ninna-ui/core (auto-installed) + CSS setup.

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.

Centered Content

Inline

Use inline-flex for inline centering.

inline=false (default)

Centered

Takes full width

inline=true

🎯

Shrinks to content

Use Cases

Common patterns using Center.

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