概要

今回は React.js や Next.js に基づいた UI コンポーネント例集として、「ui」という OSS についてご紹介したいと思います。

「ui」についてはとてもシンプルで、HTML/CSS/JS 環境で使用できるほか、React.js や Next.js で使用可能な UI のサンプルがいくつも紹介されています。

それでは早速詳細についてみていきましょう！

特徴

特徴としてはとてもシンプルですが、UI のサンプルが一覧で紹介されています。

それぞれ気になったアイテムを選択することでソースコードをすばやく確認することができます。

利用方法としては、「ui」の GitHub リポジトリの REAMDE を参照することで利用可能です。

私のほうでも早速こちらの「ui」を使用してみました。

ローカル環境にリポジトリをクローンして動かしてみます。

以下のコマンドで実際に動作させることが可能です。

git clone https://github.com/atherosai/ui.git
cd ui
npm install
npm run deploy

デプロイ完了後は、ディレクトリ内にある index.html をブラウザで表示させると、実際の UI コンポーネントを見ることができます。

例として一番上の accordinon-01 を開いてみますと以下のような UI が表示されました。

UI もシンプルですし動作もぬるぬる動いているので、とても参考となる UI ですね。

このほかにもたくさんの UI サンプルがありますので、気になったサンプルを実際に動かしてみてみることをお勧めします。

今回は React.js や Next.js に基づいた UI コンポーネント例集として、「ui」という OSS についてご紹介いたしました。

サンプル自体はとてもシンプルかつ見やすいソースコードなので、どなたにも使いやすく参考になるものと思います。

気になった方や参考にしてみたい方は、ぜひ一度こちらの「ui」を見てみてはいかがでしょうか。

特に見当たりませんでした。