コンテナContainerBeta

ページやセクションの横幅、左右余白、中央寄せを一貫して制御するレイアウトプリミティブです。

状態とバリエーション

サイズ展開

sm から full / prose まで、Container が持つ最大幅の違いを確認します。

size="sm"

size="md"

size="lg"

size="xl"

size="2xl"

size="full"

size="prose"

本文幅

長文は広げすぎず、本文として読みやすい横幅に保ちます。

読みやすい本文

長文は広げすぎず、本文として読みやすい横幅に保ちます。

セクション幅

ドキュメントや通常ページの主要セクションに使う標準幅です。

リリースノート

標準的なドキュメントブロックには、セクション幅のコンテナを使います。

全幅

アプリ面や横方向の情報量が多い領域では、親幅いっぱいに広げます。

アプリ面や横スクロール可能な領域

プロパティ

表は横にスクロールできます

プロパティ	型	初期値	説明
size	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full" \| "prose"	"lg"	コンテンツの最大幅です。本文には prose、画面全体には full を使います。
as	keyof JSX.IntrinsicElements	"div"	描画する HTML 要素です。main、section、article などを指定できます。
className	string	-	追加の className です。

使い方

import { Container } from "@gunjo/ui";

const sizes = ["sm", "md", "lg", "xl", "2xl", "full", "prose"] as const;

export function ContainerSizePreview() {
  return (
    <div className="w-full space-y-3">
      {sizes.map((size) => (
        <Container
          key={size}
          size={size}
          className="rounded-md border border-dashed bg-muted/50 py-3 text-center text-sm text-muted-foreground"
        >
          size=&quot;{size}&quot;
        </Container>
      ))}
    </div>
  );
}

使用コンポーネント

Container

Grid Cluster HStack VStack