Components

Code

Inline code highlight for displaying code snippets, variable names, or keyboard commands within text. Supports multiple colors and sizes.

Installation

npm install @trinkui/react

Import

import { Code } from "@trinkui/react";

Usage

Wrap inline code text to give it a styled background and monospace font.

Install dependencies with npm install and start the dev server using npm run dev.

<p>
  Install dependencies with <Code>npm install</Code> and
  start the dev server using <Code>npm run dev</Code>.
</p>

Colors

Click a color below to preview it. Six color variants are available.

The function console.log() outputs data to the browser console.

defaultprimarysecondarysuccesswarningdanger

<Code color="default">default</Code>
<Code color="primary">primary</Code>
<Code color="secondary">secondary</Code>
<Code color="success">success</Code>
<Code color="warning">warning</Code>
<Code color="danger">danger</Code>

Sizes

Toggle between sizes to see how the code element scales.

useState()return value;deprecated

<Code size="sm">useState()</Code>
<Code size="md">useState()</Code>
<Code size="lg">useState()</Code>

In Context

Code can be used inline within paragraphs to highlight technical terms.

Use forwardRef to pass a ref through a component to one of its children.

The any type should be avoided in strict TypeScript projects.

Successfully deployed to production at v2.4.1.

Error: TypeError: Cannot read properties of undefined

<p>Use <Code color="primary">forwardRef</Code> to pass a ref...</p>
<p>The <Code color="warning">any</Code> type should be avoided...</p>
<p>Deployed to <Code color="success">production</Code> at <Code>v2.4.1</Code>.</p>
<p>Error: <Code color="danger">TypeError: Cannot read...</Code></p>

Props

Prop	Type	Default	Description
children	ReactNode	--	The code text to display
color	"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"	"default"	Color theme of the code highlight
size	"sm" \| "md" \| "lg"	"md"	Size of the code element

Accessibility

Uses the semantic <code> HTML element, which screen readers recognize as code content.
Monospace font provides a visual distinction from surrounding text.
Color is not the sole indicator of meaning — the monospace font and background provide additional differentiation.
Sufficient color contrast ratios are maintained across all color variants.

← Chip Divider →