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

Usage

Copy on hover

Add copy — a copy icon appears on hover and copies the text content on click. The icon briefly switches to a checkmark as feedback.

npm install motion-components

Always visible copy

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

npm install motion-components

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
--color-accent	color	#2563eb	Text colour and icon hover colour
--color-accent-dim	color	#2563eb18	Background fill behind the code text
--color-muted	color	#60608a	Copy icon default colour

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.

Accessibility

No motion or animation — the component is purely visual and fully functional with all accessibility settings. Respects system colours via CSS custom properties.