Zenn
😆

初心者でも使いやすいUIコンポーネントライブラリ「CSS Materials」の紹介

に公開
Next.js
npm
tech

はじめに

はじめまして。フロントエンドの開発を初めて約半年のhonoです。
元々、私は様々なUIコンポーネントライブラリ（例えばshadcn/uiやAnt Designなど）を使うのが好きで、自分好みのコンポーネントを作ってみたいという考えを持っていました。
今回、そんな私がReactのUIコンポーネントライブラリをリリースしたので、基本的な使い方と使うメリットなどについて紹介していきたいと思います。

CSS Materialsとは

CSS Materialsは、「初心者でも使いやすくカスタマイズ性が高い」をテーマにしたUIコンポーネントを提供するライブラリです。現在使われている主流のUIコンポーネントライブラリはカスタマイズ性が高い分、初心者にはハードルが高く感じられるかもしれません。CSS Materialsでは、あえて基本的なカスタマイズとUIコンポーネントのみを提供し、初心者にも使いやすく、自ら進んでカスタマイズできるようなライブラリにしました。

使い方

では実際にCSS Materialsを使う方法を解説していきます。

初期設定

CSS Materialsの初期設定は非常に簡単です。以下のコマンドをで実行するだけで完了します。
（今後themeを追加したいと考えております。）

npm install css-materials

基本的な使い方

コンポーネントをインポートし、プロジェクトで使用することができます。

// コンポーネントをインポートする
import { Button } from "css-materials"

export default function Home() {
 return (
  <div>
   {/* コンポーネントを使用する */}
   <Button colorScheme="blue" onClick={() => alert('Button Clicked!')}>Button</blue>
  </div>
 )
}

スタイリング

きっと、CSS Materialsのコンポーネントをインポートして使用した際、見た目が何も変わらないことに違和感を抱くでしょう。しかし、このCSSファイルをインポートすれば、見た目が一瞬でCSS Materialsのスタイルに変わります。

import 'css-materials/dist/styles.css';

コミュニティと貢献

CSS Materialsはコミュニティの力で成り立っています。新しいコンポーネントの提案やバグ報告は大歓迎です。

  • 新しいコンポーネントの提案: 新しいアイデアや改善点を提案するために、Issueを提出してください。
  • バグ報告: バグを見つけた場合は、Issueを提出して報告してください。

まとめ

CSS Materialsは、「初心者でも使いやすくカスタマイズ性が高い」をテーマにした"使いやすさ"を重視したUIコンポーネントライブラリです。これを機に、あなたも「CSS Materials」を使ってみませんか？

Discussion