エコシステム

これは、styled-components を使用して構築された素晴らしいものの不完全なリストです。共有するものがございましたら、 awesome-styled-components GitHub のリポジトリに追加してください。自動的にここに表示されます！

貢献する

styled-components を使用して構築されたプロジェクトをご存知でしたら、貢献と提案は常に歓迎いたします！まず 貢献ガイドライン をお読みになり、PR を提出してください。

styled-components で構築

コンポーネント

  • react-data-table-component
    • 組み込みのソート、ページネーション、選択、展開可能な行、カスタマイズ可能なスタイルを備えたデータテーブル。
  • oah-ui
    • 4つのテーマ、グリッドシステム、LTRおよびRTL方向、テーマを追加および編集するためのテーマシステムを使用して構築されたコンポーネントライブラリ。
  • react-styled-floating-label
    • 任意のHTML入力で動作するフローティングラベルコンポーネント。
  • grape-ui
    • styled-system とその他のオープンソースコンポーネントを使用するコンポーネントライブラリ。
  • styled-off-canvas
    • シンプルなワンオフキャンバスメニュー。
  • React95
    • Windows 95 スタイルのUIコンポーネント。
  • react-functional-select
    • マイクロサイズでマイクロ最適化されたセレクトコンポーネント。
  • Grommet
    • アクセシビリティ、モジュール性、レスポンシブネス、テーマを念頭に置いて構築されたコンポーネントライブラリ。
  • bootstrap-styled
    • Bootstrap 4 コンポーネント、mixin、ユーティリティの実装。グローバル共有コミュニティエコシステムを考慮。
  • react-epic-spinners
    • スピナーの再利用可能なコンポーネント。
  • styled-react-modal
    • 使い慣れたAPIと構文シュガーを備えたモーダルコンポーネント。
  • Smooth UI
    • UIライブラリ/デザインシステム。
  • rendition
    • 最新のWebアプリを迅速に構築するための強力なコンポーネントライブラリ。
  • styled-icons
    • 人気のアイコンパック（Font Awesome、Material、Octiconsなど）からのアイコン。
  • @hackclub/design-system
    • Hack Clubによって構築された、柔軟で再利用可能なWeb UIコンポーネントのセット。
  • react-styled-select
    • 軽量なセレクトコントロールコンポーネント。
  • react-microlink
    • リンクを美しいプレビューに変換します。
  • ReaKit
    • インタラクティブなUIを構築するためのツールキット。
  • Rebass
    • 機能的なReact UIコンポーネントライブラリ。
  • react-css-loaders
    • 純粋なCSSローディングコンポーネントのコレクション。
  • react-simple-chatbot
    • シンプルなチャットボット/会話型UIコンポーネント。
  • reactour
    • コンポーネントへの観光ガイド。
  • uiGradients
    • グラデーション用のドロップインコンポーネント。
  • react-aria-tooltip
    • アクセシブルなReactJSツールチップコンポーネント。
  • grommet-icons
    • Grommetアプリのアイコン。

グリッドシステム

ヘルパー

  • MetaComponent
    • レガシーHTMLとCSSをstyled componentsに移行します。
  • styco
    • JSXインラインスタイルをstyled componentsに簡単にリファクタリングするためのVS Code拡張機能。
  • react-components-cli
    • styled componentsを生成するクライアント。
  • theme-miner
    • styled-componentsを使用して、複雑なデザインシステムをReactで簡単に、読みやすく作成できます。
  • styless
    • 使い慣れたLess構文でコンポーネントを宣言的にスタイル設定します。
  • css-in-js-media
    • レスポンシブデザインに対応します。
  • spacing-helper
    • 要素間の均一な間隔を作成するためのスタンドアロンヘルパー。
  • styled-components-extractor
    • VS Codeで束縛されていないタグを抽出します。
  • styled-media-helper
    • メディアクエリを作成します。
  • styled-tachyons
    • Tachyonsスタイルの省略形を通常のCSSと混ぜ合わせる。
  • styled-px2vw
    • px単位をvw単位に変換する機能を備えたstyled-componentsの拡張。
  • styled-normalize
    • normalize.cssを追加します。
  • styled-email-components
    • インラインスタイルを使用してメールファーストコンポーネントを構築するための拡張機能。
  • styled-breakpoints
    • シンプルで強力なカスタムブレークポイント。
  • styled-reboot
    • Bootstrap v4 reboot.css。
  • polished
    • 軽量なSass/Compassスタイルのmixin/ヘルパーのセット。
  • styled-reset
    • Eric Meyer's Reset CSS。
  • styled-transition-group
    • react-transition-groupアニメーションを作成します。
  • shevyjs
    • グローバルなタイポグラフィと垂直リズムを作成および管理します。
  • design-system-utils
    • デザインシステムへのアクセスを向上させるユーティリティ。
  • styled-components-modifiers
    • BEM風味の修飾子（およびレスポンシブ修飾子）を有効にします。
  • webstorm-styled-components
    • IntelliJエディターでの強調表示サポート。
  • styled-theming
    • アプリのテーマを作成します。
  • styled-system
    • デザインシステムユーティリティ。
  • styled-map
    • プロップをスタイルにマッピングするための非常にシンプルなライブラリ。
  • styled-tools
    • 便利な補間関数。

テスト

ボイラープレート

  • styled-react-boilerplate
    • モダンで最小限のボイラープレート。
  • ジェネレーター create-redux-app
    • create-react-appの上にReduxとその他の便利なライブラリを追加します。
  • Superstylin'
    • Gatsbyスターター。
  • react-boilerplate
    • 最高の開発者エクスペリエンスとパフォーマンスとベストプラクティスに焦点を当てた、高度にスケーラブルなオフラインファーストファウンデーション。
  • ARc
    • Atomic React Appボイラープレート。

---

実アプリ

  • Earner
    • フィンランドの雇用コミュニティへのナンバーワンのリソース。
  • Nulogy
  • Nyxo iOS＆Androidアプリ
    • パーソナライズされた睡眠コーチングモバイルアプリ。
  • Vimeo
    • ビデオコラボレーション、ビデオ配信、その他すべてのビデオ。
  • Orbitコンポーネント
    • Kiwi.comによって、そしてのために構築されたOrbit Design Systemのコンポーネントライブラリ。
  • PageXL
    • 数分でランディングページとオンラインストアを作成するためのノーコードウェブサイトビルダー。
  • Taskade
    • 分散チームのための統合ワークスペース。リアルタイムコラボレーションと組織化ツール。
  • njt.now.sh
    • njt（npm jump to）は、パッケージナビゲーションショートカットを提供するツールとサービスです。Next.jsを使用し、サーバーサイドレンダリングが含まれます（ソース）。
  • Strapi管理パネル
    • コンテンツAPIを構築するためのStrapi組み込み管理パネル。
  • Jane
    • ファッションとホームデコレーションの最新のトレンドを提供するデイリーディールサイト。
  • Sweetgreen Androidアプリ
    • Sweetgreenは、サラダを提供するアメリカのファストカジュアルレストランチェーンです。既にReact Native AndroidアプリケーションにStyled Componentsを使用しています。
  • WebGazer
    • アップタイム監視と分析サービス。
  • Cloverleaf
    • チームの隠れた特性に関する洞察を明らかにします。
  • The Players Tribune
    • ゲームの声。
  • Moleskine
    • Moleskine Digital Studio。
  • FortniteMaster.com
    • プロフェッショナルなFortnite Battle Royale統計。
  • Prisma
    • GraphQLサーバー用のオープンソースGraphQL ORM（ソース）。
  • InVision
    • デジタル製品デザイン、ワークフロー、コラボレーション。
  • TSM
    • 公式TSMサイト。
  • Swipe Life
    • Tinder Swipe Life。
  • Autodesk
    • オンラインCADエディターとビューアー。
  • Vogue
    • ファッション、トレンド、ビューティー、そして人々。
  • Spectrum
    • 未来のコミュニティプラットフォーム（ソース）。
  • Casper
    • すべての人々のためのより良い睡眠。
  • Coinbase
    • 信頼してBitcoin、Ethereumなどを売買します。
  • Typeform
    • データ収集をエクスペリエンスに変えます。
  • Atlaskit
  • ticketmaster.co.uk
    • コンサート、演劇、サッカー、家族で楽しめる日帰り旅行のチケット。
  • shop.lego.com
    • LEGOショップ。
  • Patreon
    • アーティストやクリエイターが持続可能な収入を得てファンとつながるための最良の方法。
  • Target
    • もっと期待してください。もっと安く。
  • Dutchie
    • オンライン大麻注文と配送。
  • Tab Ipsum
    • 簡単に偽のコンテンツを生成します（ソース）。
  • Booben
    • デザイン、開発、データの接続、ソースコードの取得-すべてを1か所で。
  • React Native Explorer
    • React Nativeパッケージと例を簡単に探索します。
  • Coinbase Pro
    • 取引UI、FIX API、REST APIを備えた米国を拠点とするデジタルアセット取引所。
  • rick-morty-app
    • リックとモーティの情報ポータル。
  • Hack Club
    • 高校のコーディングクラブのグローバルな非営利コミュニティのウェブサイト（ソース）。
  • ヘルシンキフードガイド
    • ヘルシンキで最高の料理だけを紹介するウェブサイト。
  • 経済複雑性のアトラス
    • 市場全体のグローバルな貿易の流れを調査し、これらのダイナミクスを時間とともに追跡し、すべての国にとって新たな成長機会を発見するための研究とデータ視覚化ツール。
  • Outline
  • Count Minutes
    • あなたの時間を管理するのに役立つアプリケーション。
  • GitPoint
    • GitPointは、100％無料の最も機能豊富な非公式GitHubクライアントです。
  • en.kachkaev.ru
    • next.jsを使用して構築された個人的なホームページ。GraphQL、Docker、CI、およびマイクロサービスアーキテクチャも使用しています（GitLabのソース）。
  • WutTheLint
    • リンターの検索可能なカタログ。
  • GetShitDone
    • 作業タスクを追跡するためのタイマー（ソース）。
  • Swat.io
    • Die Socialistenによるチーム向けのソーシャルメディア管理。
  • Grabient.com
    • Webグラデーションを生成するための美しくシンプルなUI。（ソース）。
  • CodeSandbox
    • React開発用に調整されたオンラインエディター（ソース）。
  • rosesdaycare.center
    • 更新時にテーマの色が変わるマーケティングウェブサイト（ソース）。
  • joeireland.com
    • Joseph Irelandのポートフォリオ（ソース）。
  • michaelhsu.tw
    • CRAプリレンダラーを使用して構築されたシンプルな静的ホームページ（ソース）。
  • Reactiflux
    • Gatsbyを使用して構築されたReactifluxコミュニティのホーム（ソース）。
  • Dirtyredz.com
    • David McClain | Dirtyredz * 自己紹介、最新のプロジェクト、連絡先（ソース）。
  • sachagreif.com
    • Gatsbyを使用して構築された個人的なホームページ（ソース）。
  • spaceexperience.club
    • 毎日宇宙の素晴らしい写真を提供します、Astronomy Picture of the Day。（ソース）。
  • PostCSS.parts
    • PostCSSプラグインの検索可能なカタログ。

---

さらに読む

記事

カンファレンス動画

ビデオチュートリアル

--- #