Center

The Center centers its child both horizontally and vertically.

This will be centered

// apps/docs/src/components/examples/center/default/react.tsx
import { Center } from '@cloudvoyant/helical-react';

export default function ReactCenterDefault() {
  return (
    <Center className="h-40 rounded-md border border-border bg-muted/40">
      <div className="rounded-md bg-primary/15 px-4 py-2 text-sm">This will be centered</div>
    </Center>
  );
}

<!-- apps/docs/src/components/examples/center/default/svelte.svelte -->
<script lang="ts">
  import { Center } from '@cloudvoyant/helical-svelte';
</script>

<Center class="h-40 rounded-md border border-border bg-muted/40">
  <div class="rounded-md bg-primary/15 px-4 py-2 text-sm">This will be centered</div>
</Center>

Examples

Icon

// apps/docs/src/components/examples/center/icon/react.tsx
import { Center } from '@cloudvoyant/helical-react';

export default function ReactCenterIcon() {
  return <Center className="size-12 rounded-md bg-primary/15 text-sm font-medium">1</Center>;
}

<!-- apps/docs/src/components/examples/center/icon/svelte.svelte -->
<script lang="ts">
  import { Center } from '@cloudvoyant/helical-svelte';
</script>

<Center class="size-12 rounded-md bg-primary/15 text-sm font-medium">1</Center>

Inline

Text before

inline

text after.

Text before

inline

text after.

// apps/docs/src/components/examples/center/inline/react.tsx
import { Center } from '@cloudvoyant/helical-react';

export default function ReactCenterInline() {
  return (
    <div className="text-sm">
      Text before
      <Center className="mx-2 inline-flex rounded-md bg-primary/15 px-3 py-1 font-medium">inline</Center>
      text after.
    </div>
  );
}

<!-- apps/docs/src/components/examples/center/inline/svelte.svelte -->
<script lang="ts">
  import { Center } from '@cloudvoyant/helical-svelte';
</script>

<div class="text-sm">
  Text before
  <Center class="mx-2 inline-flex rounded-md bg-primary/15 px-3 py-1 font-medium">inline</Center>
  text after.
</div>

API Reference

The Center exposes no manual sizing or display props — use className/class, which is merged last via cn so Tailwind classes override the defaults.

Center

Props

Prop	Type	Default	Description
`className` / `class`	`string`	—	Merged via `cn` with `centerBase` (`flex items-center justify-center`). Pass `inline-flex` to make it inline.

Accessibility

Renders a native <div>, so it requires no roles or keyboard handling.