motion-code-inline

Inline <code> tag with a styled background, monospace font, and an optional copy button. The accent, background, and icon colours are all controllable via CSS custom properties.

Preview

Run npm install motion-components to get started, then wrap any tag like <motion-reveal>.

Import

import 'motion-components/motion-code-inline'   // just this one
import 'motion-components'               // or the whole library

Usage

<p>Import <motion-code-inline>motion-components</motion-code-inline> once.</p>

Copy on hover

Add copy. A copy icon appears on hover and copies the text content on click. The icon is a motion-icon-state that morphs into a check after copying. It scales with the text, so it follows the font size around it.

npm install motion-components

<motion-code-inline copy>npm install motion-components</motion-code-inline>

Always visible copy

Use copy-visible to keep the copy button always visible. No hover required.

npm install motion-components

<motion-code-inline copy-visible>npm install motion-components</motion-code-inline>

Properties

Attribute	Property	Type	Default	Description
copy	copy	boolean	false	Show a copy button on hover. Copies text content on click and shows a checkmark briefly.
copy-visible	copyVisible	boolean	false	Keep the copy button always visible instead of only on hover.

CSS variables

Variable	Type	Default	Description
--mc-color-accent	color	#2563eb	Text colour and icon hover colour
--mc-color-accent-dim	color	#2563eb18	Background fill behind the code text
--mc-color-muted	color	#60608a	Copy icon default colour
--mc-icon-color-active	color	copy button colour	Colour of the check after copying

Theming

All colours are CSS custom properties that pierce the Shadow DOM. Override them on any parent to match your brand.

Import motion-components.

Run npm install to install.

/* Dark theme example */
.theme-block {
  --mc-color-accent: #60a5fa;
  --mc-color-accent-dim: #60a5fa20;
  --mc-color-muted: #94a3b8;
}

Accessibility

The copy button is a native <button> named "Copy", which changes to "Copied" after a click. With prefers-reduced-motion, the copy icon switches to the check at once, with no morph. Respects system colours via CSS custom properties.