---
id: code
title: Code
category: 'data-display'
package: '@chakra-ui/layout'
description:
  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.
---

## Import

```js
import { Code } from '@chakra-ui/react'
```

## Usage

```jsx
<Code>Hello world</Code>
```

### Colors

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

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