Tailwind.cssベースのモダンでスッキリしたスタイルの、オープンソースのUIコンポーネントとWebサイトのテンプレートのコレクション・「Float UI」
Float UI Float UIはTailwind.cssベースのモダンでスッキリしていて美しいオープンソースのUIコンポーネントとWebサイトのテンプレートのコレクションです。MITライセンスのもとでソースコードが公開されています...
Resource - フレームワーク
ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集・「Theme Toggles」
Theme Toggles Theme Togglesはライトモード/ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集です。MITライセンスの元OSSとしてソースコードが公開されています。 太陽と月のアイ...
Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」
Windstatic WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメ...
リアルタイムコラボレーションなアプリ開発のためのNext.jsスターターキット・「Liveblocks starter kit」
Liveblocks starter kit Liveblocks starter kitはリアルタイムコラボレーションなアプリ開発のためのNext.jsスターターキットです。例えばTodoやホワイトボードなどなど他ユーザーと共同で作...
Radix UIとTailwind.cssで構築されたオープンソースのコンポーネント集・「shadcn/ui」
shadcn/ui shadcn/uiはRadix UIとTailwind.cssで構築されたオープンソースのコンポーネント集です。コンポーネントライブラリではなく、コレクションとして提供しているそうです。依存関係としてインストールし...
スクロールと動画を同期させるJavaScriptライブラリ・「ScrollyVideo.js」
ScrollyVideo.js ScrollyVideo.jsはスクロールと動画を同期させるJavaScriptライブラリです。スクロールすると動画が再生する、ではなくて、スクロールに応じて動画が進む感じです。 このライブラリは...
Tailwind.cssのためのオープンソースのモダンなUIコンポーネントライブラリ・「Sailboat UI」
Sailboat UI Sailboat UIはTailwind.cssのためのオープンソースのモダンなUIコンポーネントライブラリです。150以上の汎用的でシンプルなコンポーネントが揃えられています。 具体的には、アコーディオ...
モダンで美しいオープンソースのTailwind.cssコンポーネント集・「Ripple UI」
Ripple UI See the Pen Untitled by kachibito (@kachibito) on CodePen. Ripple UIはモダンで美しいオープンソースのTailwind.cs...
Svelteで高パフォーマンスなWebアプリを構築するための公式フレームワーク・「SvelteKit」
SvelteKit SvelteKitはSvelteで高パフォーマンスなWebアプリを構築するためのOSSフレームワークです。Svelte公式のフレームワークとなっており、高速動作に面倒な作業のサポートを行う事で開発者はコーディングに...
非依存で使えるオープンソースのモジュール式データ可視化のためのJavaScriptフレームワーク・「Unovis」
Unovis Unovisは非依存で使えるオープンソースのモジュール式データ可視化のためのJavaScriptフレームワークです。React、Angular、SvelteはもちろんVanillaでもTSでも使えます。 動的に変化...
ダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSS・「Bahunya」
Bahunya Bahunyaはダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSSです。ナビゲーションはネストにも対応しています。 セマンティックなHTML要素でWebサイトやWebアプリを設計...
スクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリ・「Lenis」
Lenis Lenisはスクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリです。LocomotiveやGSAP ScrollSmootherといった先発ライブラリをリスペクトしつつ、より使いやすく欠点も補っ...
Intro.jsのようなWebサイトのツアーを実装するオープンソースのJSライブラリ・「TourGuide.js」
TourGuide.js See the Pen TourGuide JS basic CDN example by kachibito (@kachibito) on CodePen. TourGuide.j...
要素にメタリックなスタイルを提供するスタイルシート・「MetalliCSS」
MetalliCSS See the Pen Untitled by kachibito (@kachibito) on CodePen. MetalliCSSは要素にメタリックなスタイルを提供するスタイルシー...
使いやすさ、拡張性、スケーリングなどを重視したOSSのマルチベンダーマーケットプレイスプラットフォーム・「OpenMarketplace」
OpenMarketplace OpenMarketplaceは使いやすさ、拡張性、スケーリングなどを重視したオープンソースのマルチベンダーマーケットプレイスプラットフォームです。 PHPフレームワークのSymfonyと、OSS...
マウスの動きに応じて輝くホログラフを実装できる・「pokemon-cards-css」
pokemon-cards-css pokemon-cards-cssはマウスの動きに応じて輝くホログラフを実装できるスタイルシートです。名前の通りでポケモンのトレカのホログラフを再現したものになります。 と言っても自分自身でポ...
Q&Aコミュニティを構築するためのオープンソースプラットフォーム・「Answer」
Answer AnswerはQ&Aコミュニティを構築するためのオープンソースプラットフォームです。Yahoo！知恵袋的な質問コミュニティの開発をサポートします。 Go、React.js、Bootstrap、axiosなどで構築さ...
必要最低限だけ用意されたclass-lessな軽量スタイルシート・「Bolt.css」
Bolt.css Bolt.cssは必要最低限だけ用意されたclass-lessな軽量スタイルシートです。HTML要素のみでミニマルなスタイリングが可能となっています。 従来のクラスレスなCSSと異なり、どちらかというとスタータ...
ReactベースのCRUDアプリを構築するためのオープンソースのヘッドレスWebアプリケーションフレームワーク・「refine」
refine refineはReactベースのCRUDアプリを構築するためのオープンソースのヘッドレスWebアプリケーションフレームワークです。 Create（作成）、Read（読み取り）、Update（更新）、Delete（削...
オープンソースのNode.jsアプリケーション用管理パネル・「AdminJS」
AdminJS AdminJSはオープンソースのNode.jsアプリケーション用管理パネルです。数分で全てのデータを1か所で管理できるNode.jsアプリ用のダッシュボードを構築できるそうです。 提供された複数データをもとに、O...
HTMLやCSSをSVGに変換するためのオープンソースのライブラリ・「Satori」
Satori SatoriはHTMLやCSSをSVGに変換するためのオープンソースのライブラリです。ホスティングサービスのVercel謹製のようです。 イメージ的にはHTMLやCSSを書く感覚でSVGを生成できる、と言った方が近...
ブラウザで任意の要素をクリックするだけでIDEを起動して該当のコードに移動してくれる拡張機能・「Locator.js」
Locator.js Locator.jsはブラウザで任意の要素をクリックするだけでIDEを起動して該当のコードに移動してくれるブラウザ拡張機能です。Chrome、Edge、Brave、Opera、Firefoxなど主要ブラウザは概ね...