Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Code

Used to display inline code

SourceStorybookRecipe
console.log("Hello, world!")

Usage

import { Code } from "@chakra-ui/react"
<Code>Hello world</Code>

Examples

Sizes

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

console.log()console.log()console.log()console.log()

Variants

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

console.log()console.log()console.log()console.log()

Colors

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

gray

console.log()console.log()console.log()console.log()

red

console.log()console.log()console.log()console.log()

green

console.log()console.log()console.log()console.log()

blue

console.log()console.log()console.log()console.log()

teal

console.log()console.log()console.log()console.log()

pink

console.log()console.log()console.log()console.log()

purple

console.log()console.log()console.log()console.log()

cyan

console.log()console.log()console.log()console.log()

orange

console.log()console.log()console.log()console.log()

yellow

console.log()console.log()console.log()console.log()

Props

PropDefaultType
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
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Previous

Blockquote

Next

Code Block