ComponentesComponents

Estructura de dashboardDashboard layout

Barra lateral de navegación y contenido con métricas y un gráfico.Side navigation and content with metrics and a chart.

DiseñoDesign: coss ui (MIT) · card.tsx, sidebar.tsx (aspecto)MITherramienta · densidaddensity alta · sobriaMarkdownJSON

CódigoCode

<div class="c-dash">
  <aside class="c-dash__side">
    <a class="c-dash__brand" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="3.5"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/></svg><span>Estudio</span></a>
    <nav class="c-dash__nav" aria-label="Panel">
      <ul>
        <li><a class="c-dash__link" href="#resumen" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/></svg><span>Resumen</span></a></li>
        <li><a class="c-dash__link" href="#pedidos"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><span>Pedidos</span></a></li>
        <li><a class="c-dash__link" href="#clientes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M17 11a3 3 0 1 0 0-6"/><path d="M22 21a6 6 0 0 0-4-5.6"/></svg><span>Clientes</span></a></li>
        <li><a class="c-dash__link" href="#informes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg><span>Informes</span></a></li>
        <li><a class="c-dash__link" href="#ajustes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg><span>Ajustes</span></a></li>
      </ul>
    </nav>
    <p class="c-dash__user"><span class="c-dash__avatar" aria-hidden="true">AL</span><span>Alonso<small>Administrador</small></span></p>
  </aside>
  <main class="c-dash__main">
    <header class="c-dash__head">
      <div><h1 class="c-dash__title">Resumen</h1><p class="c-dash__sub">Septiembre 2026 · datos de ejemplo</p></div>
      <div class="c-btn-row"><button class="c-btn c-btn--outline c-btn--sm" type="button">Exportar</button><button class="c-btn c-btn--primary c-btn--sm" type="button">Nuevo pedido</button></div>
    </header>
    <div class="c-stat-grid c-dash__stats">
      <article class="c-stat"><h2 class="c-stat__label">Ingresos</h2><p class="c-stat__value">S/ 48 200</p><p class="c-stat__delta"><span aria-hidden="true">↑</span> 12 % <span class="c-stat__vs">frente a agosto</span></p><svg class="c-stat__spark" data-values="31,33,30,36,38,37,41,44,43,48" aria-hidden="true" focusable="false"></svg></article>
      <article class="c-stat"><h2 class="c-stat__label">Pedidos</h2><p class="c-stat__value">1 130</p><p class="c-stat__delta"><span aria-hidden="true">↑</span> 7 % <span class="c-stat__vs">frente a agosto</span></p><svg class="c-stat__spark" data-values="88,92,95,90,99,104,101,108,110,113" aria-hidden="true" focusable="false"></svg></article>
      <article class="c-stat"><h2 class="c-stat__label">Ticket medio</h2><p class="c-stat__value">S/ 42,70</p><p class="c-stat__delta"><span aria-hidden="true">↑</span> 4 % <span class="c-stat__vs">frente a agosto</span></p><svg class="c-stat__spark" data-values="39,40,40.5,40,41,41.8,41.2,42,42.4,42.7" aria-hidden="true" focusable="false"></svg></article>
    </div>
    <section class="c-dash__panel">
      <figure class="c-chart" data-c-chart data-type="line">
        <figcaption class="c-chart__head"><span class="c-chart__title">Ingresos por semana (S/ miles)</span><span class="c-chart__note">Datos de ejemplo</span></figcaption>
        <div class="c-chart__legend" aria-hidden="true"></div>
        <div class="c-chart__plot" tabindex="0"></div>
        <p class="c-chart__readout" aria-live="polite"></p>
        <details class="c-chart__data"><summary>Ver datos</summary><table><thead><tr><th scope="col">Semana</th><th scope="col">Septiembre</th><th scope="col">Agosto</th></tr></thead><tbody>
          <tr><th scope="row">S1</th><td>10.2</td><td>9.1</td></tr><tr><th scope="row">S2</th><td>11.8</td><td>9.8</td></tr><tr><th scope="row">S3</th><td>12.1</td><td>10.4</td></tr><tr><th scope="row">S4</th><td>14.1</td><td>11.7</td></tr>
        </tbody></table></details>
      </figure>
    </section>
  </main>
</div>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

  1. Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
  2. Agrega también:Also add: Tarjeta de métricaStat card, GráficoChart, BotónButton.
  3. Copia los archivos:Copy the files: dashboard.html, dashboard.css.
  4. Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

  • Para herramientas internas, paneles y administración.
  • Cuando la persona vuelve a diario a revisar números.
  • For internal tools, panels and admin.
  • When people come back daily to check numbers.

Mejor noAvoid

  • Para una landing: usa secciones.
  • Con más de 6 enlaces en la barra: agrupa.
  • For a landing page: use sections.
  • With more than 6 sidebar links: group them.

AccesibilidadAccessibility

navigationmain
TabRecorre navegación, botones y gráficoMoves through navigation, buttons and chart
  • <aside> con <nav> etiquetado y aria-current en la página actual.
  • En móvil la barra lateral pasa arriba, con desplazamiento horizontal.
  • <aside> with a labelled <nav> and aria-current on the current page.
  • On mobile the sidebar moves to the top with horizontal scroll.

Cómo probarloHow to test it

  • En 390 px, la navegación queda arriba y no hay scroll horizontal de la página.
  • At 390 px, navigation sits on top and the page doesn't scroll sideways.

CréditosCredits