Skip to main content
Designkufu

smarthr-ui-container

Containerは、ページの主要コンテンツの横幅と外側のパディングを制御するレイアウトコンポーネントです。すべてのページで本文領域の最大幅と上下左右の余白を設定するときに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-container
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/kufu/smarthr-design-system/HEAD/plugins/smarthr-design-system/skills/smarthr-ui-container/SKILL.md -o .claude/skills/smarthr-ui-container.md

Drops the SKILL.md into .claude/skills/smarthr-ui-container.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

ページの主要コンテンツの横幅と外側のパディングを制御するレイアウトコンポーネントです。すべてのページで本文領域の最大幅と上下左右の余白を設定するときに使います。

import

import { Container } from 'smarthr-ui'

Props

Props 名 型 デフォルト値 必須 説明
size "FULL" | "NARROW" | "DEFAULT" | "WIDE" DEFAULT - -
padding Gap | { block?: Gap; inline?: Gap; narrowModeBlock?: Gap; narrowModeInline?: Gap; } { block: 2, inline: 2, narrowModeBlock: 1.5, narrowModeInline: 1 } - -

実装ルール

best-practice-for-layouts

smarthr-ui/Layoutsに属するコンポーネント(Center,Cluster,Container,Reel,Stack,Sidebar)の利用方法をチェックするルールです。

詳細は eslint-plugin-smarthr の各ルール README を参照してください。

使い方チェックリスト

レイアウト > コンテナの大きさ

  • [should] 大量のデータを表示する場合や 2 カラムレイアウトで 1 つのカラムに 1 ページ相当の情報を表示する場合は WIDE や FULL を検討する
  • [should] ページに表示する情報が少ない場合や入力要素が中心の画面の場合は NARROW を検討する