Code block

#Example

<figure class="code-block max-w-xl"><figcaption class="code-block-header"><span>theme.css</span><span>CSS</span></figcaption><pre><code>:root {&#10;  --seed: oklch(0.55 0.22 262);&#10;}</code></pre></figure>

#Classes

2 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.

.code-block > pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  line-height: 1.7;
}

.code-block {
  overflow: hidden;
  border-radius: var(--m-radius-xl);
  font-size: 0.875rem;
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border-bottom: var(--m-border-width) solid color-mix(in oklab, currentColor 14%, transparent);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: color-mix(in oklab, currentColor 65%, transparent);
}

#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.

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

<!-- Code block: start from the base class, then add modifiers -->
<figure class="code-block max-w-xl"><figcaption class="code-block-header"><span>theme.css</span><span>CSS</span></figcaption><pre><code>:root {&#10;  --seed: oklch(0.55 0.22 262);&#10;}</code></pre></figure>

#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.

#Related components