Code

Import

import { Code } from 'tuimorphic';

The Code component displays inline code snippets and keyboard shortcuts. For multi-line code, use the CodeBlock component.

Run npm install tuimorphic to install.

<Code>const x = 42</Code>

Prop	Type	Default	Description
variant	`'default' \| 'subtle' \| 'accent'`	`'default'`	Visual variant
kbd	`boolean`	`false`	Render as keyboard shortcut styling
children	`React.ReactNode`	-	Code content
className	`string`	-	Additional CSS class names

The useState hook returns a stateful value and a function to update it.

<Code>const x = 42</Code>

Default: const x = 42

Subtle: config.json

Accent: npm run build

<Code variant="subtle">npm install</Code>

<Code variant="accent">npm install tuimorphic</Code>

Use the kbd prop for keyboard shortcut styling:

Press Ctrl + C to copy, Ctrl + V to paste.

<Code kbd>Ctrl+C</Code>
<Code kbd>Cmd+V</Code>
<Code kbd>Alt+Tab</Code>

<p>
  Run <Code>npm install</Code> to install dependencies,
  then press <Code kbd>Ctrl+C</Code> to stop the server.
</p>