商用利用無料! コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上! -Mamba UI
Post on:2024年1月15日
Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。
コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。
![Tailwind CSSで実装されたUIコンポーネントとテンプレート -Mamba UI](http://coliss.com/wp-content/uploads-202401/2024011310@2x.png)
Mamba UIの特徴
Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。
Tailwind CSSはユーティリティファーストのCSSフレームワークなので、コンポーネントやテンプレートをカスタマイズしたい場合も簡単に変更できます。
- 150種類以上のUIコンポーネントとテンプレートが全部無料。
- テーマカラーはTailwindのカラー17色で変更できます。
- レスポンシブに完全対応。
- 各コンポーネントは、HTML, Vue, JSXでエクスポート。
- 動的なライトテーマとダークテーマ。
- 使用しているアイコンとイラストはすべてオープンソース。
- Tailwind CSSで簡単にカスタマイズできます。
MITライセンスで、商用プロジェクトでも無料で利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-01@2x.png)
Mamba UIの使い方
Mamba UIの使い方は、簡単です。
各コンポーネント・テンプレートのページを開き、上部の「HTML, Vue, JSX」からコードをコピペできます。ベースはTailwind CSSなので、Tailwind CSSをインストールしておく必要があります。詳しくはGet started with Tailwind CSSをご覧ください。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011313.gif)
Mamba UIのコンポーネント
Mamba UIには、150種類以上のコンポーネントとテンプレートがあり、カテゴリごとにまとめられています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-02@2x.png)
コンポーネントとテンプレートを全部掲載するのは多すぎるので、特によく使用しそうなものをピックアップしてみました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-04@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-05@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-06@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-07@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-08@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-09@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-10@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-11@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-12@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-13@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202401/2024011312-14@2x.png)
sponsors