💬

Chakra-UIからPanda CSS用のpresetが公開されました

2025/01/20に公開

こんにちは!
何かと頻繁に更新のあるChakra-UIですが、今回PandaCSS用のpresetが公開されていたので紹介します。

Panda CSS

Chakra-UIの開発メンバーにより開発された CSS-in-JS ライブラリです。
サーバーファースト時代における CSS-in-JS の課題を解決することを目的としています。

https://panda-css.com/

Chakra-UI

2024年の10月にv3に更新されました。
それまでのアーキテクチャから一新され、Zag.jsArk-UIといった同チームにより開発された
ヘッドレスフレームワークを使ったコンポーネントへと変更されています。

v3更新のタイミングでPanda CSSへの移行も期待されましたが、Break Changesを減らしたいとのことで見送りとなりました(参考)

しかしながらテーマなどの設定はPanda CSSライクなAPIに変更されたため、同時に使用することは可能です。

https://www.chakra-ui.com/

使い方

  1. Panda CSSをセットアップします。
    本記事では下記ドキュメントのviteをもとに作成したプロジェクトで動作させています。

https://panda-css.com/docs/overview/getting-started

  1. @chakra-ui/panda-presetをインストール
npm i -D @chakra-ui/panda-preset
  1. presets, themeを設定する
panda.config.ts
import { defineConfig } from "@pandacss/dev";

export default defineConfig({
+ // Presetを追加
+ presets: ["@chakra-ui/panda-preset"],

+ // Theme用のconditionを追加
+ conditions: {
+   light: "[data-color-mode=light] &",
+   dark: "[data-color-mode=dark] &",
+ },

  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],

  // Files to exclude
  exclude: [],

  // The output directory for your css system
  outdir: "styled-system",
});
index.html
<!doctype html>
<html lang="en" data-color-mode="light">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
  1. Recipeを使ってコンポーネントを配置
    必要なコンポーネントのRecipeをimportし、適用します。
App.tsx
import { center } from "styled-system/patterns";
import { css } from "styled-system/css";
import { input } from "styled-system/recipes";

const App = () => (
  <div className={center({ p: "2rem" })}>
    <section className={css({ maxW: "480px", w: "full" })}>
      <h1 className={css({ textStyle: "lg", fontWeight: "bold" })}>
        PandaCSS Presets
      </h1>
      {/* Recipeを適用 */}
      <input type="text" className={input()} />
    </section>
  </div>
);

export default App;

設定が適用されていれば以下のような表示結果となります。

  • ライトモード (data-color-mode="light")

  • ダークモード (data-color-mode="dark")

まとめ

今回はChakra-UIから公開されたPanda CSS用プリセットについて紹介しました。
各コンポーネント毎に適用していく使い方はあまりしないかもしれませんが、現状Ark-UIでは存在するVue.jsSvelteなどの別フレームワークへの適用の可能性が見えてきたかなと感じます。

また、Panda CSSに対してChakra-UIのトークン設定を引き継がせるという使い方もあると思います。

この辺りは今後も注視していこうと思います。

Discussion