ブックマークしておくと便利！ Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat UI
Post on:2023年3月20日
sponsors
Tailwind CSSで実装されたモダンUIコンポーネントのライブラリを紹介します。
Webサイトやスマホアプリでよく使用されるカード、ボタン、アコーディオン、タブ、フォームなど、150種類以上のUIコンポーネントが揃っており、ベースとなるレイアウトも豊富に揃っています。
Sailboat UI
Sailboat UI -GitHub
Sailboat UIの特徴
Sailboat UIはTailwind CSSで実装された、モダンUIコンポーネントのライブラリです。ライセンスはMITライセンスで、商用プロジェクトで無料で使用できます。
UIコンポーネントは150種類以上揃っており、すべてオープンースで、コピペで簡単に使用できます。
Sailboat UIの使い方
Sailboat UIを使用するには、Tailwind CSSをインストールします。
参考: Get started with Tailwind CSS
|
1 |
npm install -D tailwindcss |
tailwind.config.jsに下記を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// tailwind.config.js const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { // Set font family fontFamily: { sans: ["Inter", ...defaultTheme.fontFamily.sans], }, // Set theme colors (Required config!) colors: { primary: colors.blue, secondary: colors.slate, }, }, }, // Add plugins plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")], }; |
詳しくは、下記ページをご覧ください。
Sailboat UIのUIコンポーネント
Sailboat UIには、150種類以上のUIコンポーネントが揃っており、いくつかカテゴリを見てみましょう。
アコーディオンのコンポーネントは5種類あり、シンプルなタイプをはじめ、ボーダー・背景・シャドウなどのバリエーションがあります。
バッジも5種類、アイコン付き、クローズボタン付きもあります。
カードは4種類、画像を使用したカード、背景タイプのカード、リスト型のカードがあります。
リストは4種類、アイコン付きリスト、ボーダー区切りのリストがあります。
フォーム関連も充実しています。通常のインプット要素をはじめ、インラインラベルやボタン、フロートラベルなど16種類。
他のフォーム要素とともに、レイアウト用のコンポーネントも揃っています。
sponsors
