Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Chat

Message bubbles aligned to the start or end, with avatar, header, footer and tones.

Data display and layout15 classesNo JavaScriptLight and dark

Example

Full

Classes

15 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 chat. On a <div> in the example. Sets grid display, grid tracks, gap, padding and alignment, and --tone and --tone-fg.
CSS
.chat > * {
  grid-column: 2;
  justify-self: start;
}

.chat > .chat-avatar {
  grid-row: 2;
  grid-column: 1;
  align-self: end;
}
Modifier Modifier, combined with the chat class. On a <div> in the example. Sets grid tracks.
CSS
.chat-start {
  grid-template-columns: auto 1fr;
}
Modifier Modifier, combined with the chat class. On a <div> in the example. Sets grid tracks, alignment and corner radius, and --tone and --tone-fg.
CSS
.chat-end > .chat-avatar {
  grid-column: 2;
}

.chat-end > * {
  grid-column: 1;
  justify-self: end;
}
Part Part of the chat. On a <span> in the example. A hook for state rules such as .chat > .chat-avatar.
CSS
.chat-end > .chat-avatar {
  grid-column: 2;
}

.chat > .chat-avatar {
  grid-row: 2;
  grid-column: 1;
  align-self: end;
}
Part Part of the chat. On a <div> in the example. Sets flex display, gap, padding, text size, text color and grid tracks.
CSS
.chat-header {
  grid-row: 1;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.chat-header, .chat-footer {
  display: flex;
  gap: 0.375rem;
  padding-inline: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
Modifier Modifier, combined with the chat class. On a <div> in the example. Sets grid tracks, width, padding, corner radius, background and text color.
CSS
.chat-bubble {
  grid-row: 2;
  max-width: min(36rem, 85%);
  padding: 0.625rem 1rem;
  border-radius: var(--m-radius-3xl);
  border-end-start-radius: var(--m-radius-sm);
  background: var(--tone);
  color: var(--tone-fg);
  overflow-wrap: anywhere;
}

.chat-end .chat-bubble {
  border-end-start-radius: var(--m-radius-3xl);
  border-end-end-radius: var(--m-radius-sm);
}
Modifier Modifier, combined with the chat class. Not used in the example above. Sets --tone and --tone-fg.
CSS
.chat-bubble-neutral {
  --tone: var(--surface-3);
  --tone-fg: var(--foreground);
}
Modifier Modifier, combined with the chat class. Not used in the example above. Sets --tone and --tone-fg.
CSS
.chat-bubble-primary {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
}
Modifier Modifier, combined with the chat class. Not used in the example above. Sets --tone and --tone-fg.
CSS
.chat-bubble-secondary {
  --tone: var(--secondary);
  --tone-fg: var(--secondary-foreground);
}
Modifier Modifier, combined with the chat class. Not used in the example above. Sets --tone and --tone-fg.
CSS
.chat-bubble-accent {
  --tone: var(--accent);
  --tone-fg: var(--accent-foreground);
}
Modifier Modifier, combined with the chat class. On a <div> in the example. Sets --tone and --tone-fg.
CSS
.chat-bubble-success {
  --tone: var(--success);
  --tone-fg: var(--success-foreground);
}
Modifier Modifier, combined with the chat class. Not used in the example above. Sets --tone and --tone-fg.
CSS
.chat-bubble-warning {
  --tone: var(--warning);
  --tone-fg: var(--warning-foreground);
}
Modifier Modifier, combined with the chat class. Not used in the example above. Sets --tone and --tone-fg.
CSS
.chat-bubble-danger {
  --tone: var(--danger);
  --tone-fg: var(--danger-foreground);
}
Modifier Modifier, combined with the chat class. Not used in the example above. Sets --tone and --tone-fg.
CSS
.chat-bubble-info {
  --tone: var(--info);
  --tone-fg: var(--info-foreground);
}

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

<!-- Chat: start from the base class, then add modifiers -->
<div class="max-w-md"><div class="chat chat-start"><span class="chat-avatar avatar avatar-sm avatar-placeholder">AK</span><div class="chat-header">Ana <time>10:12</time></div><div class="chat-bubble">Is the release ready?</div></div><div class="chat chat-end"><span class="chat-avatar avatar avatar-sm avatar-placeholder">ME</span><div class="chat-bubble">Tests pass, publishing now.</div><div class="chat-footer">Seen 10:13</div></div><div class="chat chat-start"><span class="chat-avatar avatar avatar-sm avatar-placeholder">AK</span><div class="chat-bubble chat-bubble-success">Great, thank you!</div></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

  • Give meaningful images an alt text and decorative ones alt="". Initials avatars should expose the full name to screen readers.
  • 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 layoutPricingA set of plan cards with price, feature list and a featured plan.Data display and layoutTestimonialA customer quote with the author name, role and avatar.Data display and layoutMockup browserA browser frame with window dots and an address bar.Data display and layoutMockup windowA desktop window frame with dots.

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.