Marble UI
← Components

Inline Code

Preview: Soft

Inline code. For multi-line, highlighted code use CodeBlock.

Import

import { Code } from '@marbleui/ui'

Props

<Code>

PropTypeDefaultDescription
variant'soft' | 'outline''soft'

Also accepts HTML element props (278).

Usage notes

Inline code for a command, prop or filename inside text. For multi-line or highlighted code use CodeBlock.

<p>Install with <Code>bun add @marbleui/ui</Code>.</p>
  • variant is soft (default) or outline.
  • It renders a plain code element with no syntax highlighting or copy button.
  • Inside Prose, bare code tags are styled automatically, so Code is not needed there.
Example source · show
import { Code } from './code'

export const styles = {
  Soft: () => <p className="max-w-sm text-sm text-fg-muted">Install with <Code>bun add @marbleui/ui</Code> and import <Code>Button</Code> from the package root.</p>,
  Outline: () => <p className="max-w-sm text-sm text-fg-muted">Set <Code variant="outline">data-theme="soft"</Code> on any element to switch presets.</p>,
}

Source: packages/ui/src/code/code.tsx

Catalog

Category
typography
Priority
Core
Primitive
custom