AI エージェントと、
最速でプロダクトを組み上げる。

日本語ネイティブの React ブロック 80 種・CLAUDE.md テンプレート・CLI。Claude Code でリリースする日本のチームのための dev workflow。

無料ブロック多数 · ¥22,000 から · MIT base

~/my-app — bash

$ npx shoji init

✓  initialized in ~/my-app
✓  CLAUDE.md created
✓  components/ui/ ready (shadcn new-york)
✓  80 blocks indexed

Next:
$ npx shoji add hero-1

日本特化 / JP-native

日本のサービスで、
そのまま動く UI。

海外製テンプレートでは詰む細部 — 郵便番号 autofill・姓名カナ・和暦・同意チェック・特定商取引法 — を、ブロック側で吸収する。

〒郵便番号 autofill
7桁入力で都道府県・市区町村・町域まで補完。 zipcloud / Japan Post API どちらにも切替可能。
姓名・カナの自動変換
漢字を入力したらフリガナを自動生成。kuroshiro v2 内蔵で、辞書なしで動く。
和暦・元号対応
明治・大正・昭和・平成・令和。日付ピッカーは西暦/和暦の双方向に切替可能。
同意・特商法リンク
利用規約・プライバシーポリシー・特定商取引法表記が、フォームに自然に組み込まれる。

日本特化ブロックを見るライブデモ →

新規登録

jp-address · v1.1

AI prompt export · MDX

ブロックを、
そのまま AI に渡す。

Shoji は各ブロックを MDX として書き出す。frontmatter に依存・shadcn primitive・カスタマイズヒントが宣言的に並ぶ。一度貼り付けるだけで、Claude Code が context を持ったまま実装を進められる。

選ぶ01
ブロックを選ぶ
80 ブロックから 1 件
hero-1.tsx
NEW
AI エージェントと、
最速で組み上げる。
無料で試す

渡す02

shoji prompt でクリップボードへ

MDX が clipboard に入る

~/my-app

$ npx shoji prompt hero-1

✓ clipboard ← hero-1.mdx
  1,247 tokens · ready for AI

┌─ frontmatter
  shoji_block: hero-1
  shoji_version: 1.1.0
  category: marketing
  ja_specific: false
└─

貼る03
Claude Code に貼り付ける
AI が context を持って動く
Claude Code · chat⌘V
you
この hero-1 をベースに、
「サンプルアプリ」用にリライトして。
claude
✓ hero-1 を読み込み中…
shadcn semantic token を尊重して書き換えました。

ライブデモを見る 80 ブロックを見る

料金プラン · 4 SKU

チームに合うプランを、
一度払いか月額で。

個人は ¥22,000 から、チームは ¥89,800 の Lifetime が中央値。月額更新は ¥2,200 / ¥8,800。

Claude Code でリリースする、
日本のチームに使われています。

shoji を入れた瞬間、Claude Code の出力品質が変わった。
component を渡すんじゃなくて context を渡してた。

@taro_designUI/UX → デザインエンジニア

日本語フォームの autofill とカナが最初から効いてる。
海外テンプレからの移植コストが消えた。

@hanako_devフルスタックエンジニア

Pro 月額 ¥2,200 で new ブロックが降ってくる。
自分でゼロから作る理由がなくなった。

@jiro_indie個人開発者

導入チーム · Used by

Tanuki Corp.
Mori Studio
Kaede Tech
Aoyama Labs
Hinoki Works
Sakura Studio

AI エージェントと、最速でプロダクトを組み上げる。

日本のサービスで、そのまま動く UI。

ブロックを、そのまま AI に渡す。

ブロックを選ぶ

shoji prompt でクリップボードへ

Claude Code に貼り付ける

チームに合うプランを、一度払いか月額で。

Claude Code でリリースする、日本のチームに使われています。

AI エージェントと、
最速でプロダクトを組み上げる。

日本のサービスで、
そのまま動く UI。

ブロックを、
そのまま AI に渡す。

チームに合うプランを、
一度払いか月額で。

Claude Code でリリースする、
日本のチームに使われています。