# Code (/docs/code)





`Code` renders inline `<code>` — a monospace pill for a short snippet, value, or identifier sitting in ordinary prose. No syntax highlighting; for a highlighted block, see [`CodeBlock`](/docs/code-block). `color` tints the text only — the neutral background/border pill never changes.

```tsx
import { Code } from '@42-central/ui-react/code';

<Code>const x = 1</Code>
<Code color="green">npm install</Code>
```

## Playground [#playground]

<story.Playground />

### Full prop browser [#full-prop-browser]

<story.WithControl />

## Colors [#colors]

`color` tints the text only — background and border stay neutral regardless of color, so a `Code` snippet never turns into a colored chip.

<Preview align="block" code="`{COLORS.map((c) => <Code key={c} color={c}>{c}</Code>)}`">
  <div className="flex flex-wrap gap-2">
    {COLORS.map((c) => (
          <Code key={c} color={c}>
            {c}
          </Code>
        ))}
  </div>
</Preview>

## Nesting a Mark [#nesting-a-mark]

[`Mark`](/docs/mark) is also attached to `Code` as `Code.Mark` — the same component, for convenient composition when marking a token inside a snippet. `Mark` always declares its own explicit text color, so it wins over `Code`'s own color with no special-case code needed.

<Preview align="center" code="`<Code color=&#x22;red&#x22;>const <Code.Mark color=&#x22;brand&#x22;>x</Code.Mark> = 1</Code>`">
  <Code color="red">
    const 

    <Code.Mark color="brand">x</Code.Mark>

     \= 1
  </Code>
</Preview>

## API [#api]

<TypeTable
  type="{
  color: {
    type: &#x22;'brand' | 'neutral' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'cyan' | 'blue' | 'purple' | 'pink' | (string & {})&#x22;,
    description: &#x22;Tints the text only — background/border stay neutral regardless of color.&#x22;,
  },
  asChild: {
    type: &#x22;boolean&#x22;,
    default: &#x22;false&#x22;,
    description: &#x22;Render children as the root element (Ark UI polymorphism).&#x22;,
  },
}"
/>

All other props are forwarded to the underlying `<code>` (or `asChild` element).

## Accessibility [#accessibility]

`Code` renders a semantic `<code>` element, the right markup for inline code/computer output. It carries no interactive behavior.