Container

import { Container } from "@kuzenbo/core";

export default function Page() {
  return (
    <Container>
      <section className="border-border bg-card text-card-foreground space-y-4 rounded-lg border p-6">
        <header className="space-y-1">
          <p className="text-muted-foreground text-sm">Release summary</p>
          <p className="text-base font-medium">
            Q2 component adoption is up 18% across product surfaces
          </p>
        </header>
        <ul className="text-muted-foreground space-y-2 text-sm">
          <li>49 components migrated to semantic color tokens.</li>
          <li>
            Regression suite stayed green across all package workspaces.
          </li>
          <li>Design and engineering handoff time dropped to one sprint.</li>
        </ul>
      </section>
    </Container>
  );
}

import { Container } from "@kuzenbo/core";

export default function Article() {
  return (
    <Container className="max-w-3xl">
      <article className="border-border bg-card text-card-foreground space-y-4 rounded-lg border p-6">
        <p className="text-muted-foreground text-sm">Field note</p>
        <p className="text-base">
          The narrow variant is tuned for prose-heavy content like changelog
          entries, implementation guides, and migration walkthroughs.
        </p>
        <p className="text-muted-foreground text-sm">
          Teams can keep reading comfort high without sacrificing layout
          consistency.
        </p>
      </article>
    </Container>
  );
}

import { Container } from "@kuzenbo/core";

export default function CustomWidth() {
  return (
    <Container style={{ "--kb-container-max-width": "72rem" } as React.CSSProperties}>
      {/* Content */}
    </Container>
  );
}

:root {
  --kb-container-max-width: 72rem;
}