Chakra UI v3の変更点

少し前ですが、Chakra UI v3がリリースされました。 https://www.chakra-ui.com/blog/00-announcing-v3

このブログや、仕事のプロジェクトでもChakra UIを使っているので、変更点をまとめてみました。

デザインアーキテクチャ

Chakra v3ではデザインアーキテクチャが大きく変更された影響でほとんどのコンポーネントが再設計されました。

セマンティックトークン

セマンティックトークンとは、デザインシステムのデザインプロパティを表すための変数です。 Chakra v3では7つのセマンティックトークンが導入されました。

スニペット

これが一番大きな変更点に感じました。 Chakra UI v3では、CLIコマンドを使ってコンポーネントのスニペットを生成し、スニペットで生成されたコンポーネントをページで使用します。 イメージとしてはShadcn uiです。

実行速度の改善

• テーマのランタイム関数を削除
• スタイリングエンジンの外部化
• CSSアニメーションへの移行 framer-motionは依存関係から削除されました

新しいコンポーネントの追加

Ark UIからいくつかの新しいヘッドレスコンポーネントが追加されました。

エコシステもの受け入れ

iconや、カラーモードの管理、hooksをChakra UIが提供するのをやめて、他のライブラリに任せるようになりました。

まとめ

マイグレーションガイド がありますが、これはバージョン上げるのは中々大変そうですね... また、依然としてサーバーコンポーネントを使うことができないのは少し残念でした。 App Routerが一般的になっている今、Chakra UIの需要は下がっていくのかなと思いました。 v3を機にChakra UIをやめるというのも選択肢の一つかもしれません。