Plantilla web

DashboardKit Free React Admin Template

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

La descripción de esta plantilla aún no está disponible en español, así que se muestra en inglés.

Dashboard · Gratis

Abrir demo en vivo

Páginas

Capturas de la demo, página a página. Desplázate dentro de cada página para verla entera.

/react/free/Welcome | Dashboard Kit Free React Hooks + Admin Template
Plantilla web DashboardKit Free React Admin Template, página /react/free/, parte 1
/react/free/dashboard/salesSales | DashboardKit React Bootstrap 5 Admin Template
Plantilla web DashboardKit Free React Admin Template, página /react/free/dashboard/sales, parte 1
/react/free/typographyTypography | DashboardKit React Bootstrap 5 Admin Template
Plantilla web DashboardKit Free React Admin Template, página /react/free/typography, parte 1Plantilla web DashboardKit Free React Admin Template, página /react/free/typography, parte 2
/react/free/colorColor | DashboardKit React Bootstrap 5 Admin Template
Plantilla web DashboardKit Free React Admin Template, página /react/free/color, parte 1Plantilla web DashboardKit Free React Admin Template, página /react/free/color, parte 2Plantilla web DashboardKit Free React Admin Template, página /react/free/color, parte 3

Análisis del diseño

Una lectura por IA del diseño de esta plantilla: colores, tipografía, espaciado, secciones y detalles característicos. Ottermind parte de ella cuando usas la plantilla.

Este análisis aún no está disponible en español, así que se muestra en inglés.

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

Detalles de la plantilla

Categoría
Dashboard
Autor
codedthemes
Publicada en
21st.dev
Precio
Gratis
  • Dashboard
  • Admin Panel
  • Analytics

Diseño original de codedthemes, publicado en 21st.dev. Ottermind no copia el código de la plantilla: crea una web nueva a partir del briefing.

El briefing del que parte Ottermind

Se abre en Studio como borrador: añade tu marca, tu público y tus páginas antes de enviarlo.

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.

Cómo usar esta plantilla

  1. 1

    Haz clic en «Usar esta plantilla» para abrirla en Ottermind Studio con el briefing ya escrito.

  2. 2

    Añade al briefing tu marca, tu público, las páginas y el contenido.

  3. 3

    Ottermind crea una web nueva inspirada en este diseño; sigue ajustándola en el chat.