shadcn/ui 向けのオープンソースの UI コンポーネント・ブロック集。カラーピッカーやガントチャートなどを組み合わせて使え、CLI から導入できる。
Awesome Something
デザイン・UI
62 件
Spectrum UI
高級感のあるデザインとアニメーションを備える React コンポーネント・ブロック集。shadcn/ui・Tailwind CSS・Motion を使い、MCP 経由の導入にも対応する。
21st.dev
コミュニティが作成した React コンポーネント・テンプレート・shadcn テーマを集めた大規模な UI ライブラリ。作例を探し、コードや AI 向けのプロンプトを再利用できる。
Shadcnblocks
shadcn/ui・Tailwind CSS・React 向けの UI ブロック・コンポーネント・テンプレート集。ランディングページやダッシュボードの部品を、コピーや CLI で組み込める。
Kokonut UI
React・Next.js・Tailwind CSS・Motion で作られたオープンソースの UI コンポーネント集。ライブプレビューや shadcn CLI から導入できる。
Toggles.dev
React・Svelte・Vue 向けのアニメーション付きテーマ切り替えトグル集。shadcn/ui や npm から導入するか、ソースをコピーして使える。
8bitcn/ui
レトロな 8 ビット風ピクセルデザインの UI コンポーネント・ブロック集。オープンソースで公開されており、コードをコピーして画面に組み込める。
EvilCharts
React 向けのアニメーション・インタラクション付きチャート集。Recharts と Apache ECharts を基盤に、shadcn/ui に合うグラフをコピーして組み込める。
coss ui
Base UI を基盤としたモダンな UI コンポーネントライブラリ。フォーム・ダイアログ・ナビゲーションなど、アプリの画面に必要な部品を提供する。
Rare UI
独特な見た目と動きを持つ React コンポーネント集。アニメーション付きのフォルダ・入力欄・視覚効果などを、shadcn CLI で組み込める。
beUI
React・Next.js 向けのアニメーション付き UI コンポーネント集。Motion と Tailwind CSS を使ったボタン・モーダル・タブなどを、コピーや shadcn CLI で導入できる。
cn
Tailwind CSS v4 のクラス名の条件付き結合と競合解決を行うライブラリ。clsx と tailwind-merge の互換 API を備え、フレームワークに依存せず利用できる。
TanStack Time
時刻やカレンダーの UI 構築を支援するヘッドレスユーティリティのプロジェクト。TypeScript・JavaScript と主要フレームワークを対象とし、現時点のリポジトリは概要の README のみ。
assistant-ui
React などで AI エージェントのチャット画面を構築するライブラリ。会話・ストリーミング・ツール呼び出しを管理し、AI SDK や LangGraph などのバックエンドと連携できる。
useLayouts
React・Next.js 向けのアニメーション付き UI コンポーネント集。レイアウト・ナビゲーション・操作パターンなどを、ソースからコピーしてカスタマイズできる。
Nexvyn/UI
Motion のアニメーションを取り入れた React コンポーネント集。shadcn CLI から追加し、ソースを調整してプロジェクトに組み込める。
Cult UI
shadcn/ui と Tailwind CSS を使う React プロジェクト向けの、アニメーション付きコンポーネント・ブロック集。
Spell UI
React プロジェクトにコピーして使える UI コンポーネント集。アニメーション付きの部品を揃え、MCP からも利用できる。
ObsidianUI
React・TypeScript・Tailwind CSS 向けの UI コンポーネントライブラリ。検索可能な作例から部品を選び、プロジェクトに組み込める。
Beautiful UI
AI エージェントを組み込んだアプリ向けの UI プリミティブ集。ストリーミング回答・承認カード・ツール情報・タスク進捗などの表示部品を提供する。
shadcn/ui
アクセシブルな React UI 部品とソースコードを提供するデザインシステムの基盤。CLI でプロジェクトへ追加し、コードを直接カスタマイズできる。
UIAble
shadcn ベースの UI システム。コンポーネントに加え、ページブロックやランディングページ・ダッシュボード用テンプレートを提供する。
Hugeicons
複数のスタイルを備えたアイコンライブラリ。SVG や Figma で利用でき、React・Vue・Svelte などのフレームワークにも対応する。
Refero Styles
配色・タイポグラフィ・余白・コンポーネントをまとめた DESIGN.md の作例集。AI コーディングに使うデザインスタイルを探せる。
DESIGN.md（Hyperbrowser）
AI コーディング向けの DESIGN.md を扱う、Hyperbrowser のデザインリソース。
designmd.supply
AI コーディングや UI/UX 設計に活用できる、DESIGN.md を中心としたデザインリソース集。
DesignMD
Web サイトから配色・タイポグラフィ・余白などのデザインシステムを抽出し、AI が利用できる DESIGN.md を生成するツール。
getdesign.md
実在する Web サイトの配色・タイポグラフィ・余白・コンポーネントを分析した DESIGN.md のコレクション。AI コーディングエージェントに渡すデザインの参照資料を探せる。
Design.md Store
AI コーディング向けのデザインシステム仕様を DESIGN.md 形式で配布するライブラリ。カテゴリ別のデザインをプレビューし、プロジェクト用にダウンロードできる。
Kigen Color Generator
基準色から濃淡のカラーパレットを生成するツール。色数やコントラストを調整し、CSS・Tailwind CSS・デザイントークンなどの形式で書き出せる。
DESIGN.md（Stitch）
Google Labs の AI デザインツール Stitch が採用する、デザインシステムを Markdown に記述する DESIGN.md の公式仕様ドキュメント。配色・タイポグラフィ・コンポーネントの役割や根拠を明文化でき、オープン仕様として公開されているため Stitch 以外の AI エージェントにもデザインルールを渡せる。
Design Token Naming Guide
デザイントークンの命名規則を学ぶインタラクティブなレッスンと、独自のトークン体系を組み立てるツールを提供する。
Neuform
プロンプトから Web ページを生成し、テンプレートや再利用可能な DESIGN.md を作成できる AI デザインツール。
Aura
テンプレートや UI コンポーネントを参考に、AI で Web デザインを生成・編集できるサービス。HTML や Figma への書き出しに対応する。
QuiverAI
テキストや参照画像からロゴ・イラストなどの SVG を生成・編集する、ベクターグラフィックス特化の AI モデルとツール。
Paper
HTML・CSS を基盤にした、AI エージェントと連携できるデザインキャンバス。デザインをコードとして扱い、MCP 経由でコードベースのスタイルやコンポーネントと同期できる。
OpenDesign
AI コーディングエージェントと DESIGN.md を使い、プロトタイプ・Web ページ・スライドなどを作成できる、オープンソースのデザインワークスペース。
Material 3 Expressive の画面をブラウザで組み立てるデザインツール。画面遷移やテーマを確認し、Android・Web 向けの AI コーディング用プロンプトとして書き出せる。
AI エージェントの応答からチャート・フォーム・テーブル・ダッシュボードなどの UI をストリーミング生成するオープン標準のフレームワーク。React・Vue・Svelte・React Native などで描画でき、既存のコンポーネントやデザインシステムをそのまま利用できる。
OpenPencil
Figma の .fig と Pencil の .pen を読み書きできるオープンソースのデザインエディター。AI 機能・CLI・MCP 連携を備え、デザインの編集からコード書き出しまで行える。
Modulify
プロンプトからランディングページ・Web サイト・ダッシュボード・Web アプリを生成し、AI チャットで編集・公開できるサイト制作プラットフォーム。
Ambient CSS
光源の方向・要素の高さ・表面の材質に応じた光と影を表現する、物理ベースの CSS ライティングシステム。
Transitions.dev
Web アプリ向けの UI トランジション集。動きをプレビューしてコードをコピーでき、専用スキルを通じて AI コーディングエージェントからも利用できる。
React Bits
React 向けのアニメーション付き UI パーツ集。テキスト・背景・カーソル・スクロールなどの演出を組み合わせ、動きのある Web ページを作成できる。
CodedVisuals
React・Motion を使った、Web サイト向けのコードベースのアニメーション付きイラスト・ビジュアル集。ヒーローや機能紹介のセクションに組み込める。
neat-annotations
CSS だけで手描き風の矢印・注釈・ハイライトを Web ページに追加できるライブラリ。矢印の方向や色、ラベルを指定して説明を添えられる。
motion-panels
Motion を使い、サイズ変更・折り畳み・スナップをアニメーションで表現できるパネルライブラリ。フレームワーク非依存のコアと React 向けのアダプターを提供する。
Motion
Web 向けのオープンソースなアニメーションライブラリ。React・JavaScript・Vue で、スクロール・ジェスチャー・レイアウト変化などの動きを実装できる。
interior.dev
React・Tailwind CSS・Motion で作られたオープンソースのマイクロインタラクション集。デモを確認し、コンポーネントのソースをコピーしてカスタマイズできる。
Liquid Glass
React 向けの液体ガラス表現ライブラリ。要素や画像・動画に屈折レンズ効果を重ね、光学パラメーターを調整できる。
TypeUI
AI コーディング向けの UI プロンプト・デザインスキル・デザインシステムを提供するサービス。コンポーネントや画面の設計を支援する。
Collect UI
Web サイトやユーザーインターフェースのデザイン事例を集めたギャラリー。画面やレイアウトの設計に役立つインスピレーションを探せる。
Diagram Design
AI コーディングエージェント向けの図解作成スキル。構成図・フローチャート・タイムラインなどを、単体で閲覧できる HTML と SVG として生成できる。
Skills（Emil Kowalski）
Emil Kowalski が公開する、UI 設計・アニメーション実装を支援する AI エージェント向けスキル集。動きの設計・レビュー・改善やプロトタイプ作成に活用できる。
Design Words
デザインのスタイル・レイアウト・部品を選び、プレビューを見ながら見た目を言語化できるツール。AI コーディングエージェントに渡すプロンプトを作成・コピーできる。
Cue
UI コンポーネント・インタラクションの作例を厳選したデザインライブラリ。各作例の AI 向けプロンプトを使い、制作ツールへ見た目や動きを伝えられる。
白黒の配色・サンセリフ書体・広い余白を軸に、北欧風の UI を適用する Cursor 向けスキル。既存サイトを再デザインした作例と比較プレビューを提供する。
Landdding
Webflow・Framer・WordPress などで制作されたランディングページや Web サイトを日々追加する、キュレーションギャラリー。
Logo To Use
ブランドロゴを色付き・黒・白のバリエーションから探し、SVG 形式でダウンロードできるロゴ素材ライブラリ。
Motion In Design
カーソル反応や物理演算を取り入れた Web セクションのギャラリー。各作例を AI コーディングツールへ渡すためのプロンプトと仕様ファイルを提供する。
VibeUI
ログイン・料金表・ヒーローなど15カテゴリのレイアウト用プロンプト集。構成を選んでコピーし、AI ツールで UI の生成に使える。
UI Skills
UI・アクセシビリティ・アニメーション・フロントエンド開発などのスキルを集めたカタログ。CLI や MCP 経由で AI エージェントから利用できる。