ブックマークしておくと便利! Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat UI

Tailwind CSSで実装されたモダンUIコンポーネントのライブラリを紹介します。

Webサイトやスマホアプリでよく使用されるカード、ボタン、アコーディオン、タブ、フォームなど、150種類以上のUIコンポーネントが揃っており、ベースとなるレイアウトも豊富に揃っています。

Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat UI

Sailboat UI
Sailboat UI -GitHub

Sailboat UIの特徴

Sailboat UIはTailwind CSSで実装された、モダンUIコンポーネントのライブラリです。ライセンスはMITライセンスで、商用プロジェクトで無料で使用できます。

サイトのキャプチャ

Sailboat UI

UIコンポーネントは150種類以上揃っており、すべてオープンースで、コピペで簡単に使用できます。

サイトのキャプチャ

コンポーネントの一覧: Sailboat UI

Sailboat UIの使い方

Sailboat UIを使用するには、Tailwind CSSをインストールします。
参考: Get started with Tailwind CSS

tailwind.config.jsに下記を追加します。

詳しくは、下記ページをご覧ください。

サイトのキャプチャ

Quick Start -Sailboat UI

Sailboat UIのUIコンポーネント

Sailboat UIには、150種類以上のUIコンポーネントが揃っており、いくつかカテゴリを見てみましょう。

サイトのキャプチャ

アコーディオン

アコーディオンのコンポーネントは5種類あり、シンプルなタイプをはじめ、ボーダー・背景・シャドウなどのバリエーションがあります。

サイトのキャプチャ

バッジ

バッジも5種類、アイコン付き、クローズボタン付きもあります。

サイトのキャプチャ

パンくず

サイトのキャプチャ

ボタン

サイトのキャプチャ

カード

カードは4種類、画像を使用したカード、背景タイプのカード、リスト型のカードがあります。

サイトのキャプチャ

レイアウト

サイトのキャプチャ

リスト

リストは4種類、アイコン付きリスト、ボーダー区切りのリストがあります。

サイトのキャプチャ

ページネーション

サイトのキャプチャ

タブ

サイトのキャプチャ

フォーム: インプット要素

フォーム関連も充実しています。通常のインプット要素をはじめ、インラインラベルやボタン、フロートラベルなど16種類。

サイトのキャプチャ

フォーム: レイアウト

他のフォーム要素とともに、レイアウト用のコンポーネントも揃っています。

sponsors

top of page

©2024 coliss