Typography@knitui/components

Code

Inline or block-level monospace code. Tint comes from the active theme ramp ($color3 surface, $color12 text), so the theme prop recolors it with no per-component logic. block switches from inline <code> to a full-width <pre>.

WebiOSAndroid1 own props7 examples

Stories Source Tests Open in Storybook

import { Code } from "@knitui/components";

Playground

Loading playground…

blockRender as a full-width `<pre>` block instead of inline `<code>`.

false

themeActive theme accent — recolors the code surface via the palette ramp.

children

Playground

<Code
  block={false}
>
  npm install @knitui/components
</Code>

Examples

Inline

Inline code sits inside running prose without breaking the line.

Loading example…

InlineSource Storybook

Block

Block code spans the full container width, suitable for multi-line snippets.

Loading example…

BlockSource Storybook

Inline Vs Block

Inline and block variants side by side for a quick comparison.

Loading example…

Inline Vs BlockSource Storybook

Themed

The palette ramp follows the active theme — same component, different accent.

Loading example…

ThemedSource Storybook

Themed Block

Block code themed to different accents for visual regression.

Loading example…

Themed BlockSource Storybook

In Prose

Code embedded in a realistic paragraph of explanatory text.

Loading example…

In ProseSource Storybook

Props

Prop	Type	Default	Description
`block`	`boolean \| undefined`	`false`	Render as a full-width `<pre>` block instead of inline `<code>`.
`disabled` system	`boolean \| undefined`	—	Specifies the disabled state of the text view for testing purposes.
`size` system	`string \| number \| undefined`	—
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the code surface via the palette ramp.

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiTextElement> \| undefined`

Plus 507 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.