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.

View source
View theme source
@chakra-ui/layout

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#

<Code>Hello world</Code>

Colors#

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

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

Props#

`colorScheme`

Type

string

Default

"gray"

`size`

Type

string

`variant`

Type

string

Default

"subtle"

Edit this page