---
title: Code
description: Used to display inline code
links:
  source: components/code
  storybook: typography-code--basic
  recipe: code
---

<ExampleTabs name="code-basic" />

## Usage

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

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

## Examples

### Sizes

Use the `size` prop to change the size of the code component.

<ExampleTabs name="code-with-sizes" />

### Variants

Use the `variant` prop to change the appearance of the code component.

<ExampleTabs name="code-with-variants" />

### Colors

Use the `colorPalette` prop to change the color scheme of the component.

<ExampleTabs name="code-with-colors" />

## Props

<PropTable component="Code" part="Code" />
