Mockup code

#Example

<div class="mockup-code max-w-xl"><pre data-prefix="$"><code>npm install monsooncss</code></pre><pre data-prefix=">" class="text-warning"><code>installing...</code></pre><pre data-prefix=">"><code>added 1 package in 2s</code></pre></div>

#Classes

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

.mockup-code > pre {
  padding-inline: 1.25rem;
}

.mockup-window::before, .mockup-code::before {
  position: absolute;
  top: 0.875rem;
  left: 1rem;
}

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

<!-- Mockup code: start from the base class, then add modifiers -->
<div class="mockup-code max-w-xl"><pre data-prefix="$"><code>npm install monsooncss</code></pre><pre data-prefix=">" class="text-warning"><code>installing...</code></pre><pre data-prefix=">"><code>added 1 package in 2s</code></pre></div>

#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