# Code

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

export const CodeBasic = () => {
  return <Code>{`console.log("Hello, world!")`}</Code>
}

```

## 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.

```tsx
import { Code, Stack } from "@chakra-ui/react"

export const CodeWithSizes = () => {
  return (
    <Stack gap="2" align="flex-start">
      <Code size="xs">console.log()</Code>
      <Code size="sm">console.log()</Code>
      <Code size="md">console.log()</Code>
      <Code size="lg">console.log()</Code>
    </Stack>
  )
}

```

### Variants

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

```tsx
import { Code, Stack } from "@chakra-ui/react"

export const CodeWithVariants = () => {
  return (
    <Stack gap="2" align="flex-start">
      <Code variant="solid">console.log()</Code>
      <Code variant="outline">console.log()</Code>
      <Code variant="subtle">console.log()</Code>
      <Code variant="surface">console.log()</Code>
    </Stack>
  )
}

```

### Colors

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

```tsx
import { Code, Stack, Text } from "@chakra-ui/react"

export const CodeWithColors = () => {
  return (
    <Stack gap="2" align="flex-start">
      {["gray","red","green","blue","teal","pink","purple","cyan","orange","yellow"].map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
          width="full"
        >
          <Text minW="8ch" textStyle="sm">
            {colorPalette}
          </Text>
          <Code colorPalette={colorPalette} variant="solid">
            {`console.log()`}
          </Code>
          <Code colorPalette={colorPalette} variant="outline">
            {`console.log()`}
          </Code>
          <Code colorPalette={colorPalette} variant="subtle">
            {`console.log()`}
          </Code>
          <Code colorPalette={colorPalette} variant="surface">
            {`console.log()`}
          </Code>
        </Stack>
      ))}
    </Stack>
  )
}

```

## Props

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| colorPalette | gray | `'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` | The color palette of the component |
| variant | subtle | `'solid' \| 'subtle' \| 'outline' \| 'surface' \| 'plain'` | The variant of the component |
| size | sm | `'xs' \| 'sm' \| 'md' \| 'lg'` | The size of the component |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |