オープンソース。新しい可能性。

CompoMo(@ds-mo/ui)はフレームワーク非依存のStencil.js Webコンポーネントライブラリ。TokoMoデザイントークンでスタイリングされ、Angular/React/VueアダプターとMCPメタデータサーバーを同梱する。

ライブ本番サイトから逆エンジニアリングされた120件のプレーンテキスト DESIGN.md ブランド設計仕様のコレクション。AIコーディングエージェントがブランドに合った UI を生成できる。各ブランドは実際のカラー、タイポグラフィ、コンポーネント、ガードレルおよび自己完結型 preview.html を含む。

Tailgridsは、Tailwind CSSで構築されたオープンソースのReact UIコンポーネントライブラリです。100以上のプロダクション対応コピー＆ペーストコンポーネントに加え、UIブロックやテンプレートを提供し、TypeScript、アクセシビリティ、ダークモード、CLIインストーラーをサポートしています。

Chakra UIは、アクセシブルなウェブアプリやSaaS製品を迅速に構築するためのオープンソースのReactコンポーネントシステムです。Next.js RSCをサポートし、MITライセンスで提供されています。

Lightswind UIは、CLIを通じてソースコードとして配布される英語ドキュメント付きのReactコンポーネントライブラリです。160以上のアニメーション付きアクセシブルなコンポーネントとAIコーディングツール用MCPサーバーを提供し、コア部分はMITライセンス、一部はProコンテンツとして提供されています。

CodexはWikimediaのデザインシステムであり、Vue 3およびCSSコンポーネント、デザイントークン、アイコン、VitePressドキュメントサイトを提供します。国際化をサポートし、WCAG 2.1 AAアクセシビリティ基準に準拠しています。

AWSによるオープンソースのデザインシステム。Reactコンポーネントとグローバルスタイルを提供し、大規模なWebアプリケーション開発を支援します。

Skeletonは、Tailwind CSSをベースに構築されたアダプティブなデザインシステムです。主要なWebフレームワーク向けのターンキーコンポーネントに加え、ドキュメント、テーマジェネレーター、コミュニティチャネルを提供しています。

Ark UIはChakra UIチームによるヘッドレスでスタイルレスなコンポーネントライブラリです。Zag.jsステートマシンに基づいた45以上のアクセシブルなUIプリミティブを提供し、React、Solid、Vue、Svelteで共通のAPIを利用可能です。

Carbonは、IBMが提供する製品およびエクスペリエンスのためのオープンソース・デザインシステムです。このモノレポでは、ReactおよびWebコンポーネントライブラリ、Sassスタイル、デザイントークン、アイコン、ピクトグラム、および一貫したインターフェースを構築するためのツールを提供しています。

@alifd/nextは、Alibaba Fusionが提供するエンタープライズ向けバックエンドシステム用の設定可能なReactコンポーネントライブラリです。Fusion Designテーマパッケージと連携し、デザイナーと開発者が視覚的なソースを共有でき、npmまたはブラウザ経由でのインストールおよびモジュール単位のインポートをサポートしています。

FlowbiteはTailwind CSSベースのオープンソースUIコンポーネントライブラリで、データ属性によるインタラクティブなコンポーネントを提供し、vanilla JS API、TypeScript、RTL対応、およびReact、Vue、Svelte、Angular向けのバインディングを備えています。

HeroUI Nativeは、美しく高速でモダンなApache-2.0ライセンスのReact Native UIコンポーネントライブラリです。ドキュメント、クイックスタート用サンプルアプリ、およびデバイス上でコンポーネントを確認できるプレビューアプリを提供しています。

designlangはPlaywrightを活用したCLIで、ライブDOMからDTCGトークン、Tailwind設定、Figma変数、WCAG監査まで含めた統合デザイン言語システムを抽出・生成するオープンソースツール。

Arco Design Vue は、Arco Design システムに基づいて構築された包括的な Vue 3 UI コンポーネントライブラリで、すぐに使える 60 以上の TypeScript コンポーネント、カスタマイズ可能なテーマトークン、および @arco-design/web-vue という名前の npm パッケージを提供しています。

開発者向けのデザインシステムに関するブックマーク、リソース、記事、ツールの厳選された英語コレクション。デザインツール、デザイントークン、パターンライブラリ、コンポーネントテスト、書籍、講演などを網羅しています。

IBMのオープンソースCarbon Design Systemを実装したSvelteコンポーネントライブラリ。90以上のアクセシブルで完全な型定義を持つコンポーネント、5つの組み込みテーマ、およびアイコン、ピクトグラム、チャートのパッケージを提供します。

TinteはデザインシステムをAgent Pluginにコンパイルするツールです。リファレンスからアイデンティティを抽出し、SKILL.mdとtokens.cssを出力し、トークンをバイパスする色をリントします。また、shadcnプリセットやエディタテーマ等も出力可能です。

Bezier Reactは、Bezierデザインシステムを実装したReactコンポーネントライブラリを中心に、アイコン、デザイントークン、codemod、Figmaプラグイン、Stylelintパッケージを含むモノレポです。

実際のウェブサイトやブランドから抽出されたDESIGN.mdファイルの精選コレクション。プロジェクトにDESIGN.mdをドロップするだけで、AIコーディングエージェントがそのブランドのビジュアルアイデンティティ、カラー、タイポグラフィ、レイアウトパターンに一致するUIを生成できます。