# Code

Source: https://lumeo.nativ.sh/components/code

# Code

Inline or block monospace code snippet with optional copy button.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Code />

## When to Use

-   Render short inline code references inside prose text.
-   Display multi-line code blocks with monospace styling and horizontal scroll.
-   Highlight file paths, variable names, or terminal commands in documentation.

Preview Code

Inline

Use the `Code` component to style inline code. Pass `Variant="block"` for multi-line blocks.

Preview Code

Block

`dotnet add package Lumeo --version 3.11.0`

Preview Code

Custom Size

`text-xs code` `text-base code` `text-lg code`

Preview Code

Variant — interactive

Pick a variant to see it applied live.

inlineblock

`dotnet add package Lumeo`

## API Reference

### Code

Property

Type

Default

Description

Variant

string

"inline"

Render style. `inline` renders as a pill; `block` renders as a full-width scrollable block.

Size

string?

null

Tailwind text-size suffix (e.g. `xs`, `sm`, `base`, `lg`). Overrides the component default font size.

ChildContent

RenderFragment?

null

The code content to display.

Class

string?

null

Additional CSS classes merged onto the root element.

## Related Components

-   [Text](/components/text) — Paragraph text with size, color, and weight props.
-   [Heading](/components/heading) — Semantic h1–h6 with Lumeo typographic scale.