Webサイトテンプレート

CoreUI Free React Admin Template

Open-source React 19 and Bootstrap 5 admin dashboard with pre-built components, dark/light modes and responsive layouts optimized for AI-assisted development. Free and open-source.

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

Dashboard · Developer Tool · 無料

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

ページ

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

デザイン解説

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

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

Overall: admin dashboard, professional, medium density, light
Palette: background #f3f4f7; surfaces [#ffffff, #212631, #e55353, #3399ff]; text #080a0c; muted text #252a36; primary #5856d6; accents [#e55353, #3399ff, #f9b115]
Type: headings system-ui, 600, sentence-case; body system-ui, 16px; scale h1/h2/h3 24/20/18px
Shape & spacing: button/card radius 6px, no borders, subtle shadows, section spacing 24px, content width 1200px
Sections (top to bottom): Header — horizontal layout, logo, search bar, user avatar, navigation icons, white background
Hero metrics — grid of four cards, 1 column each, colored backgrounds (#5856d6, #3399ff, #f9b115, #e55353), white text, line charts inside
Traffic chart — full-width area chart with dual lines (blue/green), time range selector (Day/Month/Year), light blue fill, gray dashed baseline
Social stats — three equal-width cards with social logos (Facebook, YouTube, LinkedIn), bold numbers below, dark blue/red/blue backgrounds
Traffic & Sales — two-column layout, left: weekly bar chart (blue/red), right: gender split (yellow/orange), traffic sources (green/yellow/red/blue bars)
User table — five columns (avatar, name, country flag, usage bar, payment method, activity), alternating row colors, small icons for status and payment
Signature details: Colored metric cards with embedded line charts
Horizontal bar charts with percentage labels
Social media integration cards with brand logos
Usage progress bars in color-coded segments
Status indicators via small circular icons (green/red)
Other pages: /dashboard: main analytics view
/ui-elements: component library
/authentication: login/signup forms
/error-pages: 404/500 templates
/docs: documentation page

テンプレート情報

カテゴリ: Dashboard, Developer Tool
作者: coreui
掲載元: 21st.dev
価格: 無料

Dashboard
Admin Panel
Developer Tool

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

Ottermind が起点にするブリーフ

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

Build a dashboard website inspired by the "CoreUI Free React Admin Template" template. Reference brief: Open-source React 19 and Bootstrap 5 admin dashboard with pre-built components, dark/light modes and responsive layouts optimized for AI-assisted development. Free and open-source. Style and features to reflect: Admin Panel. Use original copy and imagery for my brand rather than the reference's placeholder content.