Website-Vorlage

DashboardKit Free React Admin Template

A free React admin dashboard starter with essential analytics widgets, UI components and prebuilt pages.

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

Dashboard · Kostenlos

Live-Demo öffnen

Seiten

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

/react/free/Welcome | Dashboard Kit Free React Hooks + Admin Template
Website-Vorlage DashboardKit Free React Admin Template, Seite /react/free/, Teil 1
/react/free/dashboard/salesSales | DashboardKit React Bootstrap 5 Admin Template
Website-Vorlage DashboardKit Free React Admin Template, Seite /react/free/dashboard/sales, Teil 1
/react/free/typographyTypography | DashboardKit React Bootstrap 5 Admin Template
Website-Vorlage DashboardKit Free React Admin Template, Seite /react/free/typography, Teil 1Website-Vorlage DashboardKit Free React Admin Template, Seite /react/free/typography, Teil 2
/react/free/colorColor | DashboardKit React Bootstrap 5 Admin Template
Website-Vorlage DashboardKit Free React Admin Template, Seite /react/free/color, Teil 1Website-Vorlage DashboardKit Free React Admin Template, Seite /react/free/color, Teil 2Website-Vorlage DashboardKit Free React Admin Template, Seite /react/free/color, Teil 3

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 #f0f2f8; surfaces [#ffffff, #1c232f, #7267ef, #161c25]; text #060606; muted text #293240; primary #7267ef; accents [#ea4d4d]

Type

headings Inter var, 500, sentence-case; body Inter var, 14px; scale h1/h2/h3: 32/28/24px

Shape & spacing

button/card radius 8px, no borders, shadow rgba(0, 0, 0, 0.1) 0px 2px 6px -1px, section spacing 24px, content width 1200px

Sections (top to bottom)
  • Header — horizontal layout with logo, menu toggle, level selector, notification bell, user avatar and name, white background
  • Sidebar — vertical navigation with dark blue background (#1c232f), icons, labels in white, active item highlighted with purple accent, "Upgrade To Pro" callout at bottom
  • Main content — grid layout of cards, 2–3 columns, white cards with subtle shadows, key metrics in large font, charts, tables, and feeds
  • Footer — centered text with branding and links, light gray text on white background
Signature details
  • Purple primary color used consistently for buttons, highlights, and data points
  • Rounded corners on all cards and buttons (8px)
  • Subtle drop shadows on cards for depth
  • Clean, minimal typography with consistent spacing
  • Iconography integrated into data cards and sidebar
  • "Buy Now" red pill-shaped button with rounded corners
Other pages
  • /react/free/dashboard/sales: same layout as home but with updated sales-specific data and breadcrumb trail
  • /react/free/typography: structured display of heading sizes, inline text styles, and contextual colors with examples

Details zur Vorlage

Kategorie
Dashboard
Autor
codedthemes
Gelistet auf
21st.dev
Preis
Kostenlos
  • Dashboard
  • Admin Panel
  • Analytics

Originaldesign von codedthemes, 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 "DashboardKit Free React Admin Template" template. Reference brief: A free React admin dashboard starter with essential analytics widgets, UI components and prebuilt pages. Style and features to reflect: Admin Panel, Analytics. 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.