Webサイトでよく使用されるUIコンポーネントをコピペで簡単に実装できる -IndieUI
Post on:2024年8月2日
sponsors
Webサイトでよく使用されるグリッド、カード、ボタン、ヘッダ、セパレータなどのUIコンポーネントをコピペで簡単に実装できるコードをまとめたIndieUIを紹介します。
たとえばボタンだと、基本となるベースのボタンをはじめ、シンプルなものからトレンドを取り入れたもの、きらめき効果や光沢感やグラデーションをアニメーション化したボタンなどが揃っています。
IndieUIの特徴
IndieUIはWebサイトでよく使用されるUIコンポーネントを迅速かつ最小限の労力で構築するのに役立つコードをまとめたサイトです。コードをコピペするだけで簡単に実装できます。
IndieUIのUIコンポーネントには、シンプルなものからトレンドを取り入れたものまで揃っており、必要に応じてカスタマイズもできます。
IndieUIで実装したUIコンポーネント
IndieUIで実装されたUIコンポーネントは、5種類のカテゴリに分けられています。
まずは、ボタン。さまざまなバリエーションを作成するために使用される基本ボタンのコンポーネントです。
ボタンのバリエーションには、ニューブルータリズムやボーダーのグラデーションがアニメーションしたり、テキストや背景がきらっと光るアニメーションがあります。
ボタンを目立たせたいときは、ここら辺のボタンが参考になります。
Eye-catching buttons -Indie UI
続いては、カード。シンプルなデザインのカードをはじめ、複数を重ねたマルチレイヤーのカードもあります。
もちろん、カードには画像やテキストを配置したもの、背景にパターンを使用したものなどもあります。
Card with image & text -Indie UI
グリッドはBento UIで、セルの数が異なるバージョンが揃っています。
Bento Grid with 4 cells -Indie UI
ローダーは、表示するコンテンツを準備するスケルトンです。
最後のその他には、さまざまなコンポーネントがあります。まずは、ヘッダ。
セクションなどの区切りに使用するセパレーター。
フォームは、5つのバリエーションがあります。
テキストのアニメーションは、9種類。
IndieUIの使い方
IndieUIを使用するには、Tailwind CSSが必要です。Tailwind CSSのドキュメントの手順に従って、設定します。
詳しくは、下記ページをご覧ください。
sponsors
