JP コンポーネント
npx shoji init で展開される JP 最適化済みの components/ui/。 デジタル庁・WCAG 準拠の 44px タッチターゲット・16px フォントサイズ・日本語行間を標準適用。
Button
デフォルトサイズを h-11(44px)・text-base(16px) に変更。タッチターゲットが WCAG / デジタル庁基準を満たす。
npx shoji add button
3 patternsInput
h-11・text-base・leading-relaxed を適用。日本語 IME 入力時の視認性を改善。
npx shoji add input
3 patternsTextarea
min-h-24・leading-relaxed(1.625) で日本語長文入力に最適化。IME 確定前のテキスト視認性を確保。
npx shoji add textarea
2 patternsLabel
leading-relaxed 適用。日本語ラベルの行間を改善し、複数行になっても読みやすい。
npx shoji add label
Select
h-11 の trigger で日本語テキストを快適に選択。base-ui Select をベースにした完全アクセシブルな実装。
npx shoji add select
Checkbox
視覚サイズは size-4(16px) を維持しつつ、after 疑似要素で 44px のタッチターゲットを確保。
npx shoji add checkbox
3 patternsRadioGroup
size-5(20px) の視覚サイズ + after で 44px タッチターゲット。base-ui Radio を使用。
npx shoji add radio-group
Form / ShojiFormField
base-ui Field を wrap したフォームプリミティブ群。ShojiFormField は必須/任意バッジを自動表示する JP 固有 wrapper。
npx shoji add form
InputOTP
OTP・認証コード入力フィールド。base-ui OTPField をベースに 6 桁 / セパレーター付きレイアウトを実装。
npx shoji add input-otp
Badge
default / secondary / outline / destructive / success / warning の 6 variant。日本語 UI のステータス表示に対応。
npx shoji add badge
3 patternsCard
Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter の 6 コンポーネント構成。leading-relaxed 適用。
npx shoji add card
Avatar
画像とフォールバックテキストを持つアバターコンポーネント。base-ui Avatar ベース。
npx shoji add avatar
Skeleton
コンテンツのロード中を示すプレースホルダー。animate-pulse で自然なローディング表現。
npx shoji add skeleton
Progress
タスクの進捗を表示するプログレスバー。base-ui Progress をベースに日本語 UI に最適化。
npx shoji add progress
Separator
水平・垂直のセパレーター。base-ui Separator を使用しアクセシビリティに対応。
npx shoji add separator
1 patternsAlertDialog
ユーザーの注意が必要な操作（削除・確認）に使うモーダルダイアログ。フォーカストラップ・Esc キー対応。
npx shoji add alert-dialog
2 patternsDialog
汎用モーダルダイアログ。base-ui Dialog をベースにフォーカストラップ・Esc 対応。
npx shoji add dialog
2 patternsDrawer
画面下部から引き出すドロワー。スワイプで閉じられる。モバイルファーストな UI に最適。
npx shoji add drawer
2 patternsPopover
トリガー要素に紐付いてポップアップするコンテンツ。base-ui Popover ベースで完全アクセシブル。
npx shoji add popover
2 patternsTooltip
ホバー時にヒントを表示。base-ui Tooltip をベースに Provider パターンで使用。
npx shoji add tooltip
1 patternsHoverCard
ホバーで詳細カードを表示するコンポーネント。プロフィールカードや商品プレビューに最適。
npx shoji add hover-card
Accordion
クリックで開閉するアコーディオン。FAQ やよくある質問セクションに最適。base-ui Accordion ベース。
npx shoji add accordion
4 patternsCollapsible
単一コンテンツの開閉に使うシンプルなコンポーネント。Accordion より軽量な代替手段。
npx shoji add collapsible
2 patternsTabs
タブ切り替えコンポーネント。base-ui Tabs をベースに line variant を採用。
npx shoji add tabs
3 patternsBreadcrumb
パンくずリスト。aria-label・aria-current 対応でアクセシブル。日本語テキストに leading-relaxed 適用。
npx shoji add breadcrumb
ScrollArea
カスタムスクロールバー付きのスクロールエリア。base-ui ScrollArea ベース。
npx shoji add scroll-area
Slider
値を範囲内でドラッグして選択するスライダー。base-ui Slider ベース。
npx shoji add slider
Switch
オン/オフを切り替えるスイッチ。base-ui Switch ベース。sm / default の 2 サイズ。
npx shoji add switch
Toggle
押下状態を持つ 2 状態ボタン。テキスト整形やフィルターに最適。variant / size CVA 対応。
npx shoji add toggle
ToggleGroup
複数の Toggle をグループ化。single / multiple の選択モードに対応。
npx shoji add toggle-group
DropdownMenu
ボタンクリックで展開するドロップダウンメニュー。checkbox / radio / sub menu に対応。
npx shoji add dropdown-menu
ContextMenu
右クリック（長押し）で表示するコンテキストメニュー。checkbox / radio / sub menu に対応。
npx shoji add context-menu
Menubar
アプリケーション上部に配置するメニューバー。ファイル / 編集 / 表示 などのメニューに対応。
npx shoji add menubar
NavigationMenu
サイトナビゲーション用の高機能メニュー。ホバーで詳細パネルを展開できる。
npx shoji add navigation-menu
Table
データを表形式で表示するテーブル。Header / Body / Footer / Row / Head / Cell / Caption 構成。
npx shoji add table
Toast
画面隅に表示するトースト通知。base-ui Toast の createToastManager パターンを使用。
npx shoji add toast