Layout

Container

A max-width wrapper that centres its content.

data-scope="container"

Usage

ReactVueSvelteAngular

import { Container } from "@crosskit-ui/react";

<Container maxWidth="lg">…</Container>

<script setup lang="ts">
import { Container } from "@crosskit-ui/vue";
</script>

<template>
  <Container max-width="lg">…</Container>
</template>

<script lang="ts">
  import { Container } from "@crosskit-ui/svelte";
</script>

<Container maxWidth="lg">…</Container>

import { CkContainer } from "@crosskit-ui/angular";

@Component({
  imports: [CkContainer],
  template: `<ck-container maxWidth="lg">…</ck-container>`,
})
export class Demo {}

Props

Prop	Type	Default	Notes
`maxWidth`	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"	`"lg"`	Width cap.
`padding`	boolean	`true`	Horizontal gutters.
`center`	boolean	`true`	Auto side margins.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.