Webサイトテンプレート

Modernize Free React MUI Dashboard

Free React + MUI admin dashboard template with a professional layout and easy customization for faster development.

このテンプレートの説明はまだ日本語に対応していないため、英語で表示しています。

Dashboard · Starter Kit · 無料

ライブデモを開くソースリポジトリを見る

ページ

ライブデモのページごとのスクリーンショットです。枠内をスクロールするとページ全体を見られます。

デザイン解説

このテンプレートのデザインを AI が読み解いたものです：配色、書体、余白、セクション、特徴的なディテール。テンプレートを使うと Ottermind はここから始めます。

この解説はまだ日本語に対応していないため、英語で表示しています。

Overall: admin dashboard, professional, medium density, light
Palette: background #ffffff; surfaces [#5d87ff,#3772ff,#49beff,#13deb9]; text #2b2b2b; muted text #2a3547; primary #5d87ff; accents [#3772ff,#49beff,#13deb9]
Type: headings Plus Jakarta Sans, 600, sentence-case; body Plus Jakarta Sans, 14px; scale h3 24px
Shape & spacing: button/card radius 50px, no borders, subtle shadows, section spacing 24px, content width 1200px
Sections (top to bottom): Header — horizontal layout, dark blue top bar with logo, navigation, and user actions; white main header with brand name, notification bell, CTA buttons, and profile avatar
Sidebar — vertical left sidebar with collapsed menu items, icons, and Pro labels on some items; white background with blue active state
Main Dashboard — two-column grid: left side has bar chart (Sales Overview) with date selector; right side has Yearly Breakup with circular progress indicator and Monthly Earnings with wave line graph
Content Grid — two equal-width columns: Recent Transactions (timeline list with colored dots) and Product Performance (table with priority tags in color-coded pills)
Product Cards — four horizontally aligned cards with product images, titles, prices, ratings, and settings icon; each card has a soft shadow and rounded corners
Signature details: Blue gradient pill-shaped priority indicators (Low/Medium/High/Critical)
Circular progress ring for yearly breakup
Timeline dots in varying colors (blue, teal, orange) for transaction types
Hoverable product cards with gear icon overlay
Clean, minimal spacing with consistent padding
Rounded corner buttons and cards with 50px radius
Other pages: /dashboard: main analytics view with charts and tables
/eCommerce: product management interface
/frontend-pages: UI component showcase

テンプレート情報

カテゴリ: Dashboard, Starter Kit
作者: adminmart
掲載元: 21st.dev
価格: 無料

Dashboard
Admin Panel
Boilerplate

オリジナルデザイン：adminmart（21st.dev に掲載）。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。

Ottermind が起点にするブリーフ

Studio で下書きとして開きます。送信前にブランド、対象者、ページを書き足してください。

Build a dashboard website inspired by the "Modernize Free React MUI Dashboard" template. Reference brief: Free React + MUI admin dashboard template with a professional layout and easy customization for faster development. Style and features to reflect: Admin Panel, Boilerplate. Use original copy and imagery for my brand rather than the reference's placeholder content.