OSS探訪ページ内ナビ
概要
Panda CSSはbuild-time・type-safeなCSS-in-JS frameworkです。style objectやstyle propsをsourceからextractし、design token、recipe、utility、pattern等をcodegenしてstatic CSSとして出力します。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
主な特徴
style objectやstyle propsをbuild時にextractする
source codeをscanしてcss()等のstyle定義を抽出し、runtime styling engineではなく生成CSSとtyped helperへ変換します。
出典：[1]
design token・recipe・variantをtype-safeにcodegenする
token、semantic token、recipe、pattern、utilityの定義からTypeScript補完を持つstyled-system artifactを生成できます。
出典：[1]
v2はRust/Oxc compilerでsource extractionを行う
Panda v2はcompilerをRustでrewriteし、Oxc engineを利用してAST parsing/scanningを高速化する方向へ移行しています。
出典：[1]
向いている用途
複数frameworkで共通design systemを型安全に運用したいprojectに向く
framework-agnosticなstyle APIとdesign tokenを中心に、React等のcomponent層から一貫したutility/recipeを使いたいteamに適します。
出典：[1]
導入前の確認
@pandacss/dev 2.1.1はNode 22以上を要求する
利用者向けpackageはNode >=22を宣言し、PostCSS >=8をoptional peerとして提供します。CI/runtimeのversion条件を確認してください。
出典：[2]
build時に検出できるstatic style expressionを前提に設計する
Pandaはsource scanとcode generationを軸にするため、任意のruntime値からclassを動的生成するruntime CSS-in-JSとはmodelが異なります。dynamic valueはtoken/CSS variable等の設計へ寄せる必要があります。
出典：[1]
参考にした公式資料
- [1]Panda CSS 2.1.1 README(2026-10-05)
- [2]@pandacss/dev 2.1.1 package metadata(2026-10-05)
- [3]Panda compiler 2.1.1 release(2026-10-05)
- [4]Panda MIT license(2026-10-05)
編集部からの補足
Panda v2はcompilerをRust/Oxcへrewriteしています。利用者向けpackage@pandacss/dev 2.1.1はNode.js >=22を要求し、PostCSS >=8はoptional peerです。v1の内部構成を前提にした記事はupgrade guideと照合してください。
3ステップで試す
- 1
Panda CSS 2.1.1を一時projectへ導入する
Node.js 22以上で利用者向け
@pandacss/devを固定し、optional peerのPostCSSも明示的に導入します。demo=$(mktemp -d "${TMPDIR:-/tmp}/panda.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact --save-dev @pandacss/dev@2.1.1 postcss@8.5.29 - 2
Panda configとPostCSS integrationをscaffoldする
公式READMEのflowに沿ってPanda設定とPostCSS用設定を生成します。
npx panda init -p - 3
codegenを実行してtyped styled-systemを確認する
design token・utility・recipe用のtyped artifactが
styled-systemへ生成されることを確認します。npx panda codegen && test -d styled-system && test -n "$(find styled-system -type f -print -quit)"
成長
成長の推移 · 直近30日
6,208 Stars
推移データを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Electron123,388 Stars
共通タグ 3件 · 共通カテゴリ 1件
ChromiumとNode.jsを同梱し、HTML・CSS・JavaScriptから3 OS向けdesktop appを構築するruntime
C++ - Ant Design99,682 Stars
共通タグ 3件 · 共通カテゴリ 1件
enterprise向けReact UIを完成済みcomponents・design token・theme機構で統一し、管理画面や業務画面を素早く構築する
TypeScript - Tailwind CSS97,773 Stars
共通タグ 3件 · 共通カテゴリ 1件
ユーティリティクラスをHTMLやコンポーネントで組み合わせ、必要なCSSをビルド時に生成する
TypeScript - Storybook91,200 Stars
共通タグ 3件 · 共通カテゴリ 1件
UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop
TypeScript - Animate.css82,849 Stars
共通タグ 3件 · 共通カテゴリ 1件
classを追加するだけで再利用可能なCSS animationをUIへ適用する
CSS - normalize.css53,505 Stars
共通タグ 3件 · 共通カテゴリ 1件
browserのuseful defaultを残しながら、default styleの差異と既知bugを補正する
CSS
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。