Zenn
🐻

Kuma UIを簡単に触ってみた。

2024/12/12に公開
TypeScript
ライブラリ
CSS in JS
kuma
tech

この記事は5分程度で読めます。

はじめに

今回は、Kuma UIを簡単に触た感想の共有です。

きっかけ

Next.jsの公式ドキュメントにあるサポートされているCSS-in-JSリストの上から順に触っているのですが、ant-D, chakra-ui, react-componentsは既に触ったことがあるので、今回はKuma-uiを触ってみました。

ちなみに

興味があれば、アコーディオンを開いて覗いてください。

ちなみに
  • mui/materialは本業で触っていますが、下の画像にあるリストでは一番触りやすいです。
  • ant-Dにあるcascaderがmui/materialにもあれば嬉しいなとたまに思います。

公式のイメージ

公式ドキュメントのトップ画面はこんな感じ(2024/12/12現在)です。
デザインがかっこいい！

本題

Kuma UIの概要

  • ハイブリッド CSS-in-JSという手法を取り入れている。
  • ランタイムの表現力を維持しつつ、ゼロランタイムのパフォーマンス力も維持。
  • 静的な処理が可能なスタイルに関してはビルド時に解析して、動的な処理が必要なものに関してはJavaScriptランタイムで処理する。

コンセプト

完全に公式ドキュメント頼りですが、きれいにまとまっているので直接読んでみてください。
コンセプト
┗ Utility First(実用性を第一に)
┗ Hybrid Approach(ハイブリッドアプローチ)
┗ Headless Components(ヘッドレスコンポーネント)

テーマのカスタマイズ

createTheme機能を使用することで、カラーやブレークポイントなどのテーマを設定できます。
下記のように、ルートディレクトリにkuma.config.tsファイルを作成して、Themeを記述することで、簡単に設定できます。

kuma.config.ts
const theme = createTheme({
  colors: {
    red: {
      100: "red",
    },
    blue: "blue",
  },
  breakpoints: {
    sm: "400px",
    md: "700px",
  },
});

設定できるトークン一覧はこちらに記述されています。

また、直接コンポーネントのデフォルトを設定することもできます。

kuma.config.ts
const theme = createTheme({
  components: {
    Button: {
      defaultProps: {
        bg: "black", // ← backgroundの略
        p: "10px",  // ← paddingの略
      },
    },
  },
});

コンポーネントの使用例

こちらも公式ドキュメント[Components/Button]から持ってきました。

demo.ts
import { Button } from "@kuma-ui/core";

const ButtonExample = () => {
  return (
    <Button p={8} bg="blue" color="white" borderRadius={6}>
      Click me
    </Button>
  );
};

さいごに

導入コストがかなり低く、正直２時間くらい学習時間を確保していたのですが、45分くらいで一通り触り終わりました。本当に簡単なアプリの開発に関しては、Kuma UIを採用するのもありかなと感じました。

ですが、開発者も言っていますが追加したい機能がまだまだあるようで、もう少し発展していくと思います！今後の展開に期待したいです！

一読ありがとうございました！

参考リンク

https://www.kuma-ui.com/
https://github.com/kuma-ui/kuma-ui

(@^^)/~~~ﾊﾞｲﾊﾞｲ

Discussion