Plantilla 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 descripción de esta plantilla aún no está disponible en español, así que se muestra en inglés.

Dashboard · Developer Tool · Gratis

Páginas

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

/demos/react/latest/free/CoreUI Free React.js Admin Template
Plantilla web CoreUI Free React Admin Template, página /demos/react/latest/free/, parte 1

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 #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

Detalles de la plantilla

Categoría
Dashboard, Developer Tool
Autor
coreui
Publicada en
21st.dev
Precio
Gratis
  • Dashboard
  • Admin Panel
  • Developer Tool

Diseño original de coreui, 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 "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.

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.