@kazuemon/ui

@kazuemon/ui は、かずえもんの好みのデザインと、いろいろなところから学んだ考え方を反映させた、React の UI コンポーネントライブラリです。

v0 としてテスト公開中です

npm で v0 として公開しています。v1 までは、版を上げるたびに props の名前や見た目を変える破壊的な変更が頻繁に入ります。使うときは版を固定し、上げる前に CHANGELOG を確かめてください。

インストール

Tailwind CSS v4 と React 19 が必要です。

pnpm add @kazuemon/ui

# 日本語の推奨フォント（IBM Plex Sans JP）を使うときに必要です
pnpm add @fontsource/ibm-plex-sans-jp

# Icon などに Phosphor のアイコンを渡すときに必要です
pnpm add @phosphor-icons/react

アプリの CSS で、tailwindcss のあとに読みます。部品のクラスは、アプリの Tailwind がまとめて作ります。

css

@import 'tailwindcss';
@import '@kazuemon/ui/tailwind.css';
@import '@kazuemon/ui/fonts.css'; /* 欧文と等幅（Mulish・Geist Mono） */
@import '@kazuemon/ui/fonts-ja.css'; /* 和文（IBM Plex Sans JP） */

なぜ作っているのか

好みに合うライブラリに出会えませんでした
- どれも完成度は高いのに、自分の作りたい画面にはしっくり来ません。ただ、何が足りないのかを自分でも言えませんでした
パソコンとスマートフォンの両方で使いやすいものが欲しい
- 画面の幅で切り替えるだけでは、指で押しにくかったり、デスクトップで間延びしたりします
ドキュメントが、そのライブラリ自身で作られていないのが不満
- 「この見た目が欲しいのに、これは配られていない」ということがよくあります。だからこのサイトも、専用の部品を作らず、配っている部品だけで組んでいます
AI と一緒にどこまで作れるかの検証
- これは、ライブラリそのものと同じくらい大きな目的です