Website-Vorlage

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.

Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.

Dashboard · Developer Tool · Kostenlos

Seiten

Screenshots der Live-Demo, Seite für Seite. Scrollen Sie innerhalb einer Seite, um sie ganz zu sehen.

/demos/react/latest/free/CoreUI Free React.js Admin Template
Website-Vorlage CoreUI Free React Admin Template, Seite /demos/react/latest/free/, Teil 1

Design-Analyse

Eine KI-Auswertung des Designs dieser Vorlage: Farben, Typografie, Abstände, Abschnitte und markante Details. Ottermind startet damit, wenn Sie die Vorlage verwenden.

Diese Analyse ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.

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

Details zur Vorlage

Kategorie
Dashboard, Developer Tool
Autor
coreui
Gelistet auf
21st.dev
Preis
Kostenlos
  • Dashboard
  • Admin Panel
  • Developer Tool

Originaldesign von coreui, gelistet auf 21st.dev. Ottermind kopiert nicht den Code der Vorlage, sondern erstellt aus dem Briefing eine neue Website.

Das Briefing, mit dem Ottermind startet

Es öffnet sich in Studio als Entwurf – ergänzen Sie Marke, Zielgruppe und Seiten, bevor Sie es senden.

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.

So verwenden Sie diese Vorlage

  1. 1

    Klicken Sie auf „Diese Vorlage verwenden“, um sie mit ausgefülltem Briefing in Ottermind Studio zu öffnen.

  2. 2

    Ergänzen Sie das Briefing um Marke, Zielgruppe, Seiten und Inhalte.

  3. 3

    Ottermind erstellt eine neue Website, inspiriert von diesem Design – im Chat verfeinern Sie sie weiter.