Code

Inline and block code.

stable

Preview

Use the cn() utility to merge class names.

import { cn } from "@/lib/utils";

const classes = cn("base-class", condition && "conditional-class");

Code

tsx

import { Code, CodeBlock } from "@/components/ui/code";

export function Example() {
  return (
    <>
      <p>Use the <Code>cn()</Code> utility to merge class names.</p>
      <CodeBlock>{`import { cn } from "@/lib/utils";`}</CodeBlock>
    </>
  );
}

Props

Prop	Type	Default	Description
block	`boolean`	false	Render as a block (multi-line) instead of inline.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Structural styling only — no syntax highlighting. Pair with shiki or highlight.js if highlighted code is needed.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/code.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type HTMLAttributes, forwardRef } from "react";

// Inline code
export const Code = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
  ({ className, ...props }, ref) => (
    <code
      ref={ref}
      className={cn(
        "relative rounded border border-border bg-bg-muted px-[0.4em] py-[0.2em]",
        "font-mono text-[0.875em] text-fg",
        className,
      )}
      {...props}
    />
  ),
);
Code.displayName = "Code";

// Block code (preformatted)
export const CodeBlock = forwardRef<HTMLPreElement, HTMLAttributes<HTMLPreElement>>(
  ({ className, ...props }, ref) => (
    <pre
      ref={ref}
      className={cn(
        "overflow-x-auto rounded-lg border border-border bg-bg-muted p-4",
        "font-mono text-sm text-fg leading-relaxed",
        className,
      )}
      {...props}
    />
  ),
);
CodeBlock.displayName = "CodeBlock";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmCode (extends Label). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmCode;

PrizmCode()
PrizmCode(String text)

Inline code token — monospace on a muted bordered chip, via the .prizm-code rules. Mirrors the inline Code in components/ui/code.tsx.