Code

Code is an inline code styling component with monospace font and optional background.

Open in Storybook

Import

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

Basic usage

Preview

Code

<Text>
  Run <Code>npm install</Code> to install dependencies.
</Text>

Variants

Preview

Plain variant: code hereSubtle variant: code here

Code

<VStack gap={4} align="start">
  <Text>Plain variant: <Code variant="plain">code here</Code></Text>
  <Text>Subtle variant: <Code variant="subtle">code here</Code></Text>
</VStack>

Colors

Preview

Default colorPrimary colorAccent colorSuccess colorError color

Code

<VStack gap={2} align="start">
  <Code variant="subtle">Default color</Code>
  <Code variant="subtle" color="primary">Primary color</Code>
  <Code variant="subtle" color="accent">Accent color</Code>
  <Code variant="subtle" color="success">Success color</Code>
  <Code variant="subtle" color="error">Error color</Code>
</VStack>

Sizes

Preview

Extra smallSmallMediumLarge

Code

<VStack gap={2} align="start">
  <Code variant="subtle" size="xs">Extra small</Code>
  <Code variant="subtle" size="sm">Small</Code>
  <Code variant="subtle" size="md">Medium</Code>
  <Code variant="subtle" size="lg">Large</Code>
</VStack>

Common patterns

Inline code in documentation

Preview

Use the useState hook to manage component state. Import it from react.

Code

<Text>
  Use the <Code variant="subtle">useState</Code> hook to manage component state.
  Import it from <Code variant="subtle">react</Code>.
</Text>

Keyboard shortcuts

Preview

Press Ctrl + C to copy.

Code

<Text>
  Press <Code variant="subtle">Ctrl</Code> + <Code variant="subtle">C</Code> to copy.
</Text>

File paths

Preview

Edit the configuration in src/config/settings.ts

Code

<Text>
  Edit the configuration in <Code variant="subtle">src/config/settings.ts</Code>
</Text>

Render a code block

<Code as="pre" variant="subtle" p={4} display="block" overflow="auto">
{`function greet(name) {
  return \`Hello, \${name}!\`;
}`}
</Code>

Props reference

Prop	Type	Default	Description
variant	"plain" | "subtle"	"plain"	Visual variant
size	"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl"	-	Font size
color	string	-	Text color (semantic color token)
as	ElementType	"code"	HTML element to render

Code also accepts most Box props.

TypeScript

import { Code, type CodeVariant, type CodeProps, type CodeOwnProps } from "@tosui/react";