Get started
Data display
Data entry
General
Layout
Navigation
Blocks
Packages
A box that centers its children on both axes, in block or inline flow, with its element swappable through render.
Centered content
tsx
1
2
3import type { ReactNode } from 'react';
import { Center } from '@/registry/bases/base-ui/components/layout/center';Installation#
bash
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/center.jsonUsage#
tsx
import { Center } from '@/components/layout/center';tsx
<Center>Centered content</Center>The centring is fixed, unlike a plain flex box: reach for flex items-center justify-center directly
when the caller needs to change the alignment itself.
API reference#
Center#
Renders a div and takes every prop a div takes, plus:
| Prop | Type | Default |
|---|---|---|
inline | boolean | false |
render | ReactElement | ((props, state) => ReactElement) | - |
Size, spacing and placement (h-screen, gap-2) come from className; inline picks inline flow
over block flow, and render swaps the element, whose semantics are then the caller's. It sets
data-slot="center".
centerVariants#
The inline variant: false (the default) renders flex, true renders inline-flex.