LP Section Studio

880 production-ready UI components. React or plain HTML. MIT licensed, free.

Every component ships as a React component and as standalone HTML — 397 of them need no React, no Babel, no build step. Paste them into PHP, Rails, Hugo, WordPress, or a plain .html file and they work.

An MCP server is included, so AI coding agents can search and pull components directly.

日本語の説明は下にあります

---

What makes it different

880 components	13 style themes × 39 categories
397 work without React	Static HTML output. No framework, no build step, no hydration
MCP server included	Your AI agent searches and pulls components on its own
Every component is tested	2,661 automated tests run on every change
84 KB initial JS (gzipped)	Components load lazily — 1,871 separate chunks
MIT	Commercial use, modification, redistribution. No attribution beyond the license

Automated checks — all 880 components, every build

Check	Count	Result
Accessibility (axe-core)	881	0 violations
Keyboard operability	880	all pass
Renders without exceptions or warnings	880	all pass
Color contrast	all	enforced in CI
Horizontal overflow	all	enforced in CI

Quick start

npm install
npm run dev      # http://localhost:5173 — browse, preview, copy
npm run build    # production build
npm test         # 2,661 tests

Four ways to use a component

1. Copy-paste — open the studio, pick a component, copy the source
2. shadcn registry — npx shadcn add <url> pulls it into another project
3. Static HTML — export plain HTML with no React (397 components support this)
4. Just open a URL — every component is served as a standalone page: /html/marketing-pricing-table.html. Ctrl+U and copy, or fetch() it — CORS is open, and /html/index.json lists all 880 with their ids.

MCP server

cd mcp && npm install

Point your MCP client at mcp/src/index.js. All 880 components are available — search by category, tag, or name, and get the source back directly.

Stack

Vite + React 18 + TypeScript (strict) + Tailwind CSS v3. Runtime dependencies: react, react-dom, lucide-react, clsx, tailwind-merge, class-variance-authority. No external images, no CDN calls.

License

MIT. See LICENSE. Use it commercially, modify it, redistribute it — the only condition is that you keep the license text.

About the name. The MIT license covers the code, not the name. "LP Section Studio" and its logo identify this project and its author. Fork it freely, but please release your fork under a different name so people can tell which one is upstream. (Same convention as Rust, Node.js and Firefox.)

---

日本語

880個の本番品質UIコンポーネント。React でも素の HTML でも使えます。MIT・無料。

すべてのコンポーネントが React コンポーネントとしても、単体で動く HTML としても 書き出せます。そのうち 397個は React も Babel もビルドも不要なので、 PHP・Rails・Hugo・WordPress・素の .html にそのまま貼って動きます。

MCP サーバーを同梱しているので、AIコーディングエージェントが自分で検索して取り込めます。

他と何が違うか

• 880個 — 13スタイルテーマ × 39カテゴリ
• 397個は React 不要 — 静的HTMLで完結。フレームワークもビルドも要りません
• MCPサーバー同梱 — AIが自分で探して持ってきます
• 全件が自動検査を通過 — アクセシビリティ881件・キーボード操作880件・レンダリング880件、 合計 2,661テストが変更のたびに走ります
• 初期JS 84KB（gzip） — 1,871チャンクに分割され、選んだ時だけ読み込まれます
• MIT — 商用利用・改変・再配布すべて自由。ライセンス文の同梱以外に条件はありません

使い方

npm install
npm run dev      # http://localhost:5173 で一覧・ライブプレビュー・コピー
npm run build    # 本番ビルド
npm test         # 2,661テスト

4つの取り込み経路

1. コピペ — スタジオで選んでソースをコピー
2. shadcn レジストリ — npx shadcn add <url> で別プロジェクトに直接取り込み
3. 静的HTML — React 抜きの HTML を書き出す（397個が対応）
4. URLを開くだけ — 全880個が単体ページとして配信されています。 /html/marketing-pricing-table.html のように id を入れれば開けます。Ctrl+U でソースをコピーするか、fetch() で取得してください（CORS 許可済み）。 id の一覧は /html/index.json にあります。

なぜ「React 不要」が効くのか

Reactコンポーネント集は、SEO重視の静的サイトや、既存のPHP/Railsサイトの一部を 差し替えたい場面では使えません。ここは静的HTMLとして書き出せるので、 フレームワークを持ち込まずにセクション単位で貼れます。

ライセンス

MIT。LICENSE を参照してください。商用利用・改変・再配布はすべて自由で、 条件はライセンス文を残すことだけです。

名前について。 MIT が対象にしているのはコードであって、名前ではありません。 「LP Section Studio」の名称とロゴは、このプロジェクトと作者を指すものとして使っています。 フォークは自由ですが、フォークは別の名前で公開してください。 どちらが本家か、見つけた人が判断できなくなるためです。 （Rust・Node.js・Firefox と同じ慣行です）

---

Author

Yoggy — solo developer. I build things with AI, then actually run them and measure before writing about them.

• X: @yoggydev
• Blog (Japanese): note.com/yoggydev
• Live: lp-section-studio.pages.dev

Other free tools: stickman-video-director (Claude Code skill, MIT) · Monilit (multi-panel video player) · BIRIKABE (browser puzzle game)

If this saved you time, a ⭐ helps other people find it.

---

日本語

Yoggy — 個人開発者。AIで作って、実際に動かして確かめたことだけ書いています。

• X: @yoggydev
• note: note.com/yoggydev

役に立ったら ⭐ をもらえると、他の人にも届きやすくなります。