OSS探訪
GitHubで見るプロジェクトサイト

Ladle — React componentをstory単位で素早く開発・確認する

OSS規模スコア 190.6OSS健全度 76更新ペース 0 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
2,985
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/06/28

概要

Ladleは、React componentをstoryとして切り出し、単独表示・確認・共有するViteベースのcomponent workbenchです。component開発のfeedback loopを短くし、documentationやUI検証にも利用できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

`.stories.tsx`からcomponent sandboxを起動する

story fileを用意してladle serveを起動すると、componentごとの確認画面を自動で構成できます。

出典：[2][3]

アクセシビリティ・MSW・decorator等を組み合わせる

component単体の表示だけでなく、a11y確認やmock API、provider/decorator等を使った開発環境を構成できます。

出典：[3][4]

React UI libraryやdesign systemのcomponent開発に

componentをapplication本体から分離して開発し、見た目やstateをstory単位で共有したいteamに向きます。

出典：[2]

Storybook ecosystemとの互換性とNode要件を確認する

Storybookと似た用途でもaddonや設定は同一ではありません。移行時は既存story、addon、visual testとの互換性を確認してください。

出典：[4][3]

参考にした公式資料

  1. [1]tajo/ladle repository(2026-09-21)
  2. [2]Ladle README(2026-09-21)
  3. [3]Ladle documentation(2026-09-21)
  4. [4]@ladle/react package(2026-09-21)
  5. [5]Ladle MIT license(2026-09-21)
編集部からの補足

現在の`@ladle/react`は5.1.1でReact/React DOM 18以上、Node.js 22.12以上が必要です。Storybookの置き換え候補として比較されることがありますが、addon ecosystemや既存story互換性はprojectごとに確認してください。

3ステップで試す

  1. 1

    Ladle projectを初期化

    公式READMEのnpm Quick Startどおり、最小のReact/Ladle projectを用意します。

    mkdir my-ladle && cd my-ladle && npm init --yes && npm install @ladle/react react react-dom
  2. 2

    最初のstoryを作成

    単独表示するReact componentをstory fileとして追加します。

    mkdir src && echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
  3. 3

    Ladleを起動

    story一覧を開き、componentをapplication本体から分離して確認します。

    npx ladle serve
公式READMEで確認

成長

成長の推移 · 直近30日

2,985 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
0
Open PR
10

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • playground
  • react
  • javascript
  • testing
  • components
  • documentation
  • styleguide
  • typescript
  • ui
  • esbuild
  • vitejs
  • stories
Stars
2,985
Forks
121
Watchers
6
Open Issues
36
Contributors
61
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/06/28
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。