Modèle de site 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.

La description de ce modèle n’est pas encore disponible en français ; elle s’affiche en anglais.

Dashboard · Developer Tool · Gratuit

Pages

Captures de la démo, page par page. Faites défiler une page pour la voir en entier.

/demos/react/latest/free/CoreUI Free React.js Admin Template
Modèle de site CoreUI Free React Admin Template, page /demos/react/latest/free/, partie 1

Analyse du design

Une lecture par IA du design de ce modèle : couleurs, typographie, espacements, sections et détails marquants. Ottermind en part quand vous utilisez le modèle.

Cette analyse n’est pas encore disponible en français ; elle s’affiche en anglais.

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

Détails du modèle

Catégorie
Dashboard, Developer Tool
Auteur
coreui
Publié sur
21st.dev
Prix
Gratuit
  • Dashboard
  • Admin Panel
  • Developer Tool

Design original de coreui, publié sur 21st.dev. Ottermind ne copie pas le code du modèle : il crée un nouveau site à partir du brief.

Le brief dont part Ottermind

Il s’ouvre dans Studio comme brouillon — ajoutez votre marque, votre public et vos pages avant l’envoi.

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.

Comment utiliser ce modèle

  1. 1

    Cliquez sur « Utiliser ce modèle » pour l’ouvrir dans Ottermind Studio avec son brief prérempli.

  2. 2

    Ajoutez au brief votre marque, votre public, vos pages et votre contenu.

  3. 3

    Ottermind crée un nouveau site inspiré de ce design — continuez à l’ajuster dans la conversation.