Skip to main content
Designkufu

smarthr-ui-center

Centerは、要素を上下左右中央に配置するためのレイアウトコンポーネントです。コンテンツを画面中央に置くとき、ボックス内に中央寄せをするときに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-center
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-center/SKILL.md -o .claude/skills/smarthr-ui-center.md

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

要素を上下左右中央に配置するためのレイアウトコンポーネントです。コンテンツを画面中央に置くとき、ボックス内に中央寄せをするときに使います。

Every Layout(https://every-layout.dev/)のCenterを参考にしています。

import

import { Center } from 'smarthr-ui'

Props

Props 名 デフォルト値 必須 説明
padding Gap - - 境界とコンテンツの間の余白
minHeight string | number - - コンテンツの最小高さ
maxWidth string | number - - コンテンツの最大幅
verticalCentering boolean - - 天地中央揃えも有効化するかどうか

実装ルール

best-practice-for-layouts

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

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

使い方チェックリスト

使い方チェックリスト(Layer 3)は設定されていません。