Myna

MynaはTailwindとshadcn/uiでスタイリングされたReact.js/Next.js用のUIキットや1000以上のアイコンセットを提供するオープンソースプロジェクトです。

UIキットはMyna UI、アイコンセットはMynaUI Iconsとして提供されています。

Myna UIではアコーディオンやダイアログ、アラート、アバターやバッジ、ボタン、カレンダー、コンテキストメニュー、データテーブル、タブ、メニュー、ページネーション、スピナー、進捗バー、などの各要素やフォーム回りの項目のあれこれ、404ページやブログ投稿、CTA、FAQなどのレイアウト周り、その他さまざまなコンポーネントがシンプルで汎用性の高いスタイルで各要素に複数用意されています。

使いやすいだけでなく各要素にいくつか選択肢を用意してくれているのでMynaベースだけでも幅広いデザインに対応する事が出来ます。各UIはそれぞれのページでプレビューとコードが公開されており、コピペで導入出来るようになっています。

更に、MynaUI Iconsでは1100以上ものミニマルスタイルなアイコンが全てOSSとして自由に利用できるようになっています。

さらにそのアイコン全てに線画と塗りつぶしが用意されており、サイズの変更もプロジェクトページで出来るようになっています。

いずれのアイコンも、多岐にわたるコンテンツに対応できるようにしつつも汎用的で使いやすいものを厳選して用意されている印象でした。

UIキット及びアイコンセットのいずれもFigmaもサポートされているのでカスタマイズも可能です。これらがあればWebサイトやWebアプリのデザインに困る事もかなり減りそうかなと思う程度には充実した内容ですね。覚えておいて損は無いかと思います。

また、Proプランも用意されており、コンポーネントやアイコンのリクエストなども可能になるそうです。MynaプロジェクトはMITライセンスの元でソースコードが公開されています。

Myna UIMyna UI GithubMynaUI IconsMynaUI Icons Github

なにかとベタ褒めしてしまいましたが、唯一、改善して欲しいのはプロジェクトページの英文が大文字小文字ランダムで非常に読みにくい事でしょうか・・英語が第二言語の自分には辛いものがありました。ネイティブなら問題ないんでしょうかね。