Browse Templates

Dashboard starter

A data overview assembled from shared pieces.

Basic

A data overview assembled from shared pieces.

View Code

HTML

<section class="stack">
  <h2>
    Workspace overview
  </h2>
  <p class="muted">
    Illustrative data, not connected to a service.
  </p>
  <div class="grid">
    <article class="panel stack">
      <h3>
        Projects
      </h3>
      <p>
        14
      </p>
    </article>
    <article class="panel stack">
      <h3>
        Members
      </h3>
      <p>
        28
      </p>
    </article>
    <article class="panel stack">
      <h3>
        Published
      </h3>
      <p>
        8
      </p>
    </article>
  </div>
</section>
<section class="panel stack">
  <h2>
    Recent projects
  </h2>
  <div class="table-scroll" role="region" aria-labelledby="projects-caption" tabindex="0">
    <table>
      <caption id="projects-caption">
        Example projects
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Project
          </th>
          <th scope="col">
            Status
          </th>
          <th class="table-number" scope="col">
            Members
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            Website
          </th>
          <td>
            Published
          </td>
          <td class="table-number">
            8
          </td>
        </tr>
        <tr>
          <th scope="row">
            Customer portal
          </th>
          <td>
            In progress
          </td>
          <td class="table-number">
            4
          </td>
        </tr>
        <tr>
          <th scope="row">
            Documentation
          </th>
          <td>
            Draft
          </td>
          <td class="table-number">
            2
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
<section class="panel stack">
  <h2>
    Audience activity
  </h2>
  <figure class="stack">
    <figcaption>
      Example weekly signups
    </figcaption>
    <dl class="bar-chart">
      <div>
        <dt>
          Mon
        </dt>
        <dd>
          <meter min="0" max="100" value="42" aria-label="Mon: 42 signups">
            42 of 100
          </meter>
        </dd>
        <dd>
          42
        </dd>
      </div>
      <div>
        <dt>
          Tue
        </dt>
        <dd>
          <meter min="0" max="100" value="68" aria-label="Tue: 68 signups">
            68 of 100
          </meter>
        </dd>
        <dd>
          68
        </dd>
      </div>
      <div>
        <dt>
          Wed
        </dt>
        <dd>
          <meter min="0" max="100" value="55" aria-label="Wed: 55 signups">
            55 of 100
          </meter>
        </dd>
        <dd>
          55
        </dd>
      </div>
      <div>
        <dt>
          Thu
        </dt>
        <dd>
          <meter min="0" max="100" value="91" aria-label="Thu: 91 signups">
            91 of 100
          </meter>
        </dd>
        <dd>
          91
        </dd>
      </div>
    </dl>
  </figure>
</section>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.css panel.css table.css chart.css

Add to your page

<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/panel.css">
<link rel="stylesheet" href="/library/assets/table.css">
<link rel="stylesheet" href="/library/assets/chart.css">

10,324 bytes CSS including base · 0 bytes runtime JavaScript

Usage

Start with the overview

Replace the sample metrics, projects, and chart values. Give real data clear labels, units, and time ranges.

Connect responsibly

Your application owns authentication and data fetching. Render untrusted values safely as text; the starter has no backend connection.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.