Center

Center content within the available layout space.

@sigil-ui/componentsReact

Preview

import { Center, Badge } from "@sigil-ui/components";

<Center className="w-full min-h-[calc(var(--s-grid-cell)*4)] border border-[var(--s-border)]"><Badge>Centered in both directions</Badge></Center>

Prop	Type	Default	Description
`inline`	`boolean`	—	Use inline-flex instead of flex.

Box

Apply token-based spacing and surfaces to a layout container.

Container

Constrain content to a consistent, responsive reading width.