Astryx Center

Component

About

An Astryx layout primitive that centers content horizontally, vertically, or along both axes within its container.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Center to your project and fits it to your theme.

Code

How Astryx Center is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {Center} from '@/components/ui/astryx-center';
import {Stack} from '@astryxdesign/core/Layout';
import {Text, Heading} from '@astryxdesign/core/Text';

export default function CenterShowcase() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <Center axis="both" width="100%" height={240}>
        <Stack direction="vertical" gap={2} hAlign="center">
          <Heading level={4}>Centered content</Heading>
          <Text type="body" color="secondary">
            Horizontally and vertically aligned.
          </Text>
        </Stack>
      </Center>
    </div>
  );
}