Code

Code is a component used to display inline code. It is composed from the Box component with a font family of mono for displaying code.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Import#

import { Code } from "@chakra-ui/react"

Usage#

Hello world

<Code>Hello world</Code>

<Code>Hello world</Code>

Editable Example

Colors#

You can change the color scheme of the component by passing the colorScheme prop.

console.log(welcome)var chakra = 'awesome!'npm install chakra

<Stack direction="row">
  <Code children="console.log(welcome)" />
  <Code colorScheme="red" children="var chakra = 'awesome!'" />
  <Code colorScheme="yellow" children="npm install chakra" />
</Stack>

<Stack direction="row">
  <Code children="console.log(welcome)" />
  <Code colorScheme="red" children="var chakra = 'awesome!'" />
  <Code colorScheme="yellow" children="npm install chakra" />
</Stack>

Editable Example

Props#

Name	Type	Description	Default
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`		`"gray"`
size	`string`	Sizes for `Code` are not implemented in the default theme. You can extend the theme to implement them.	-
variant	`"outline" \| "solid" \| "subtle"`		`"subtle"`

Edit this page