Code

Code renders code in both block and inline modes. Block mode includes an optional language label and a copy-to-clipboard button.

ExamplesCodeUsageChangelog

Block

const greeting = 'Hello, world!' console.log(greeting)

Tailwind v4

<Code>const greeting = 'Hello, world!'
console.log(greeting)</Code>

With language label

vue

<template> <Button variant="primary">Click me</Button> </template>

Tailwind v4

<Code language="vue">
&lt;template&gt;
  &lt;Button variant="primary"&gt;Click me&lt;/Button&gt;
&lt;/template&gt;
</Code>

Without copy button

bash

npm install @jetpacklabs/ui

Tailwind v4

<Code language="bash" :show-copy="false">npm install @jetpacklabs/ui</Code>

Inline

Use inline for code references within body text.

Pass the modelValue prop to bind the component.

Tailwind v4

<p>Pass the <Code inline>modelValue</Code> prop to bind the component.</p>

Copy button behavior

Clicking Copy calls navigator.clipboard.writeText() with the text content of the slot. The button label changes to Copied! for 2 seconds, then resets.

Props

Prop	Type	Default	Description
inline	boolean	false	Renders as an inline <code> span
language	string	—	Language label shown in the header bar (display only, no syntax highlighting)
showCopy	boolean	true (block) / false (inline)	Show copy-to-clipboard button