Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Hero

A large opening section with centered content, an optional image overlay and a seed tinted gradient.

Data display and layout4 classesNo JavaScriptLight and dark

Example

Full

Classes

4 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 hero. On a <section> in the example. Sets grid display, alignment, height, padding, overflow and text color.
CSS
.hero:has(> .hero-overlay) {
  color: var(--color-neutral-50);
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 26rem;
  padding: 4rem 1.5rem;
  overflow: hidden;
  isolation: isolate;
  background-position: center;
  background-size: cover;
}
Part Part of the hero. On a <div> in the example. Sets stacking order, flex display, alignment, gap, width and text style.
CSS
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 46rem;
  text-align: center;
}
Modifier Modifier, combined with the hero class. Not used in the example above. Sets absolute position, offsets and background.
CSS
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--color-neutral-950) 35%, transparent), color-mix(in oklab, var(--color-neutral-950) 72%, transparent));
}

.hero:has(> .hero-overlay) {
  color: var(--color-neutral-50);
}
Modifier Modifier, combined with the hero class. On a <section> in the example. Sets background.
CSS
.hero-gradient {
  background: radial-gradient(48rem 24rem at 12% 0%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 70%), radial-gradient(40rem 26rem at 88% 8%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 70%), var(--background);
}

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

<!-- Hero: start from the base class, then add modifiers -->
<section class="hero hero-gradient"><div class="hero-content"><h1 class="text-5xl font-extrabold tracking-tight">Ship pages that look finished</h1><p class="max-w-xl text-lg text-muted-foreground">One stylesheet, one seed color, light and dark mode out of the box.</p><div class="flex gap-2"><a class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground" href="#">Get started</a><a class="inline-flex items-center rounded-lg border border-border px-4 py-2 text-sm font-medium" href="#">Read the docs</a></div></div></section>

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 layoutRating displayRead only stars filled from the --rating custom property, decimals included.Data display and layoutDividerA horizontal or vertical rule with optional text, alignment and tones.Data display and layoutFeature gridAn auto fitting grid of features with icon, title and text.Data display and layoutPricingA set of plan cards with price, feature list and a featured plan.

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.