v0.1 · in development

Center

A Box that centers its children on both axes.

Perfectly centered, both axes

import { Center, Text } from "astralis-ui";

export function CenterDemo() {
  return (
    <Center bg="brand-subtle" w="full" maxW="sm" h="32" rounded="xl">
      <Text size="sm">Perfectly centered, both axes</Text>
    </Center>
  );
}

Import#

import { Center } from "astralis-ui";

Usage#

Center is display: flex; align-items: center; justify-content: center as a component — no props to remember. Give it a size and it becomes the standard recipe for icon chips, avatars and count badges.

42 stars

"use client";

import { Center, Icon, HStack, Text } from "astralis-ui";
import { Star, Bell, Rocket } from "lucide-react";

export function CenterBadges() {
  return (
    /* The classic Center use: fixed-size icon chips. */
    <HStack gap="4">
      <Center size="12" bg="yellow-subtle" rounded="full">
        <Icon as={Star} size="sm" />
      </Center>
      <Center size="12" bg="red-subtle" rounded="xl">
        <Icon as={Bell} size="sm" />
      </Center>
      <Center size="12" bg="purple-solid" rounded="lg">
        <Icon as={Rocket} size="sm" color="inverted" />
      </Center>
      <Center px="3" h="8" bg="subtle" rounded="full">
        <Text size="xs">42 stars</Text>
      </Center>
    </HStack>
  );
}

Props#

Center adds no props of its own — it accepts everything Box does (size, bg, rounded, as, …).