Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Stats

Key numbers with a title, value, description, figure and up or down trend.

Data display and layout9 classesNo JavaScriptLight and dark

Example

Full

Classes

9 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the stats. On a <div> in the example. Sets flex display, alignment, gap, overflow, border and corner radius.
CSS
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-2xl);
  background: var(--border);
}
Modifier Modifier, combined with the stats class. Not used in the example above. Sets alignment.
CSS
.stats-vertical {
  flex-direction: column;
}

.stats-vertical > .stat {
  flex-basis: auto;
}
Part Part of the stats. On a <div> in the example. Sets alignment, grid display, grid tracks, gap, padding and background.
CSS
.stat > * {
  grid-column: 1;
}

.stats-vertical > .stat {
  flex-basis: auto;
}
Part Part of the stats. On a <span> in the example. Sets text color.
CSS
.stat-figure {
  color: var(--primary);
}

.stat > .stat-figure {
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
}
Part Part of the stats. On a <p> in the example. Sets text size, font weight and text color.
CSS
.stat-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
Part Part of the stats. On a <p> in the example. Sets text size, font weight and text style.
CSS
.stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
Part Part of the stats. On a <p> in the example. Sets flex display, alignment, gap, text size and text color.
CSS
.stat-desc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
Part Part of the stats. On a <span> in the example. Sets inline-flex display, alignment, gap, padding, corner radius and background, and --tone.
CSS
.stat-trend-up {
  --tone: var(--success);
}

.stat-trend-up::before {
  content: "\2191";
}
Part Part of the stats. On a <span> in the example. Sets inline-flex display, alignment, gap, padding, corner radius and background, and --tone.
CSS
.stat-trend-down {
  --tone: var(--danger);
}

.stat-trend-down::before {
  content: "\2193";
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Stats: start from the base class, then add modifiers -->
<div class="stats"><div class="stat"><p class="stat-title">Revenue</p><p class="stat-value">$48.2k</p><p class="stat-desc"><span class="stat-trend-up">12%</span> vs last month</p></div><div class="stat"><p class="stat-title">Active users</p><p class="stat-value">3,912</p><p class="stat-desc"><span class="stat-trend-up">4.1%</span> vs last month</p></div><div class="stat"><span class="stat-figure size-6"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/></svg></span><p class="stat-title">Churn</p><p class="stat-value">1.8%</p><p class="stat-desc"><span class="stat-trend-down">0.3%</span> vs last month</p></div></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Data display and layoutTableData tables with zebra rows, hover rows, compact cells, cell borders, a pinned header and first column, inside a scroll wrapper.Data display and layoutTimelineEvents on a line with dots or icons, vertical, horizontal or alternating sides.Data display and layoutCollapseA details element that opens and closes, with an arrow or plus icon.Data display and layoutAccordionA group of collapse items that share one frame, exclusive when they share a name.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.