@sigx/lynx-zero · Beta · Component library

Center#

A flex container that centers its children on both axes — justifyContent and alignItems are both center. One of Zero's DS-neutral layout primitives, it carries no class names and resolves background through the semantic color contract, so a token like base-200 or primary works under whatever theme is active.

Import#

TSX

import { Center } from '@sigx/lynx-zero';

Basic usage#

Drop content inside Center and it sits in the middle of the box on both axes. Give the container a concrete height (or a flex so it fills its parent) so there is space to center within:

TSX

import { Center } from '@sigx/lynx-zero';

function Hero() {
  return (
    <Center height={120} background="primary" borderRadius={8}>
      <text>Hero</text>
    </Center>
  );
}

Filling available space#

Pass flex={1} to expand Center into the remaining space of a flex parent — handy for centering content in a screen region or an empty state:

TSX

import { Col, Center } from '@sigx/lynx-zero';

function EmptyState() {
  return (
    <Col flex={1} background="base-100">
      <Center flex={1} background="base-200" borderRadius={12}>
        <text>Nothing here yet</text>
      </Center>
    </Col>
  );
}

Inside a themed layout#

Center composes with the other primitives (Row, Col, Spacer). Here it centers content within a Col under ZeroRoot, so base-100 and base-200 resolve against the active theme:

TSX

import { ZeroRoot, Col, Row, Center, Spacer } from '@sigx/lynx-zero';

function App() {
  return (
    <ZeroRoot>
      <Col flex={1} gap={16} padding={20} background="base-100">
        <Row gap={12} align="center" justify="space-between">
          <text>Dashboard</text>
          <Spacer size={8} />
        </Row>
        <Center flex={1} background="base-200" borderRadius={12}>
          <text>Centered content</text>
        </Center>
      </Col>
    </ZeroRoot>
  );
}

Props#

Prop	Type	Description
`width`	`number \| string`	Container width.
`height`	`number \| string`	Container height.
`flex`	`number`	Flex grow factor; written in long form (`flexGrow` / `flexShrink` / `flexBasis` / `minHeight`) to avoid Lynx flex-collapse.
`background`	`BackgroundValue`	Background fill — a semantic color token (e.g. `base-200`, `primary`) or any raw CSS color string.
`borderRadius`	`number`	Corner radius of the container.
`class`	`string`	Extra CSS classes appended after the computed ones.

Every style prop also accepts a per-breakpoint object such as { initial: 16, expanded: 32 }, resolved mobile-first against the window's width class. See responsive props.

Slots#

Slot	Description
`default`	The content to center on both axes.