パフォーマンス重視でReact専用として作られたオープンソースのStorybook代替・「Ladle」
Ladle LadleはReact専用として作られたオープンソースのStorybook代替です。ControlsとCSFの互換があります。 ご存知の通りStorybookもオープンソースですが、Ladleはパフォーマンスを重視し...
Resource - フレームワーク
ダークテーマを重視したオープンソースのUIパターンとコンポーネントのコレクション・「Dracula UI」
Dracula UI Dracula UIはダークテーマを重視したオープンソースのUIパターンとコンポーネントのコレクションです。Draculaの名に見覚えのある方も多いかもしれませんが、テキストエディターのダークテーマとしても人気の...
Gutenberg指向のWebサイトを作成するためのモダンなWordPressテーマ開発スターターキット・「Theme Redone」
Theme Redone Theme RedoneはGutenberg指向のWebサイトを作成するためのモダンなWordPressテーマ開発スターターキットです。フレームワークに近いかもしれません。 テンプレートエンジンとしてL...
CSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワーク・「Open Props」
Open Props Open PropsはCSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワークです。 Google Chormeの開発に関わっている方が開発されたみたいでMITライセンスの元でソース...
軽量で高速なWebコンポーネントベースのフロントエンドフレームワーク・「Leaf.js」
Leaf.js Leaf.jsは軽量で高速なWebコンポーネントベースのフロントエンドフレームワークです。ES Modulesも用いられています。 何より使いやすさを重視しており、Webサイトやコンポーネント、ライブラリなどを構...
80以上のUIコンポーネントが用意されたオープンソースのReact.js用UIライブラリ・「PrimeReact」
PrimeReact PrimeReactは80以上のUIコンポーネントが用意されたオープンソースのReact.js用UIライブラリです。更に姉妹プロジェクトのprimeiconsで200以上のアイコンも用意されています。 We...
最近見かけるモダンなカーソルエフェクトを実装できるコードを配布する・「Curzr.」
Curzr. See the Pen Curzr | Free cursor library by kachibito (@kachibito) on CodePen. Curzr.は最近見かけるモダンなカーソ...
90年代を彷彿とさせるカーソルエフェクトを実装するためのライブラリ・「90’s Cursor Effects」
90's Cursor Effects See the Pen Untitled by kachibito (@kachibito) on CodePen. 90's Cursor Effectsは90年代のW...
1つのdiv要素で作れる実用的なCSSローダーのコレクション・「one `div` loaders」
one `div` loaders See the Pen Untitled by kachibito (@kachibito) on CodePen. one `div` loadersは1つのdiv要素で作...
Material UIのReactコンポーネントで構築されているオープンソースの管理画面・「Minimal-UI」
Minimal-UI Minimal-UIはMaterial UIのReactコンポーネントで構築されているオープンソースのダッシュボードテンプレートです。 デモページが7ページほど用意されており、管理画面及びコンポーネントを構...
Webサイトにカスタマイズ可能なコマンドメニューを追加できるライブラリ・「kmenu」
kmenu kmenuはWebサイトにカスタマイズ可能なコマンドメニューを追加できるライブラリです。各コードエディタを始め、最近ではWebアプリ等でも導入されるようになったコマンドメニューを実装できる、というライブラリです。 以...
Twitterなどでの口コミを収集してAirtableにデータを保存し、任意のWebページで紹介出来るOSS・「Open Testimonials」
Open Testimonials Open TestimonialsはTwitterなどでの口コミを収集してAirtableにデータを保存し、任意のWebページで紹介出来るOSSです。英語圏でのWebアプリ等で良く見られるUIですよ...
ASCIIアートで描いたダイアグラムをSVGで整形して表示するJavaScriptライブラリ・「typograms」
typograms See the Pen Untitled by kachibito (@kachibito) on CodePen. typogramsはASCIIアートで描いたダイアグラムをSVGで整形し...
サイドプロジェクトからスタートアップに成長するまで使えるよう設計されたフルスタックWebフレームワーク・「Redwood」
Redwood Redwoodはサイドプロジェクトからスタートアップに成長するまで使えるよう設計されたフルスタックWebアプリケーションフレームワークです。 React、GraphQL、Prisma、TS、Jest、Storyb...
見やすいUIで編集も可能な用語集ページを作成できるHTML/CSS/JavaScriptテンプレート・「Glossary Page Template」
Glossary Page Template Glossary Page Templateは見やすいUIで編集も可能な用語集ページを作成できるページテンプレートです。HTML/CSS/javascriptで構成されており、レスポンシブ...
拡張性が高く、ブラウザで動作するオープンソースのテキストエディタフレームワーク・「Lexical」
Lexical Lexicalは拡張性の高いブラウザベースのオープンソースのテキストエディタフレームワークです。javascriptで書かれています。 シンプルで分かりやすいツールバーで直感的な操作が可能で、プラグインで機能の拡...
様々なグラフに対応したフレキシブルで高性能なオープンソースのReact向けチャートライブラリ・「React Charts」
React Charts React Chartsは多種多様なグラフに対応したフレキシブルで高性能なオープンソースのReact向けチャートライブラリです。 上動作デモのように、様々なタイプのグラフを描画可能で、表現にも非常に応用...
必要なものだけ揃えたミニマルなBootstrap 5ベースのオープンソース管理画面テンプレート・「Admini」
Admini Adminiは必要なものだけ揃えたミニマルなBootstrap 5ベースのオープンソース管理画面テンプレートです。 昨出来うる限り隠せる限り隠しに隠した結果どこに何があるか分かりにくくなった、みたいな極端なmini...
Reactベースで独自のWebアプリ向けコマンドパレットを作成出来る・「react-cmdk」
react-cmdk react-cmdkは独自のWebアプリ向けコマンドパレットを作成出来るReactコンポーネントパッケージです。開発者にはお馴染みのコマンドパレットをWebアプリ等に導入できる、というもの。 検索窓にテ...
250以上のコンポーネントが用意されたTailwind.cssベースのオープンソースなUIコンポーネントセット・「Preline UI」
Preline UI Preline UIは250以上のコンポーネントが用意されたTailwind.cssベースのオープンソースなUIコンポーネントのセットです。 React、Vueと互換性があり、全てのコンポーネントはRWD対...
スクロールに応じて任意の要素をアニメーションさせる非依存の軽量スクリプト・「PushIn.js」
PushIn.js PushIn.jsはスクロールに応じて任意の要素をアニメーションさせる非依存の軽量スクリプトです。ES5に準拠した全てのブラウザに対応しており、非依存で動作も軽く使い方も簡単です。 JavaScriptとCS...
面倒な設定不要で手軽にアニメーションエフェクトを付与してくれるライブラリ・「AutoAnimate」
AutoAnimate AutoAnimateは面倒な設定不要で手軽にアニメーションエJavaScriptライブラリです。学習コストもほぼ必要なくCSSを書く必要もありません。 React、Vue、SvelteやVanillaで...