console.log("Hello, world!")'use client'
import { Code } from '@chakra-ui/react'
export const CodeBasic = () => {
return <Code>{`console.log("Hello, world!")`}</Code>
}
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()'use client'
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.
console.log()console.log()console.log()console.log()'use client'
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.
gray
console.log()console.log()console.log()console.log()zinc
console.log()console.log()console.log()console.log()neutral
console.log()console.log()console.log()console.log()stone
console.log()console.log()console.log()console.log()red
console.log()console.log()console.log()console.log()orange
console.log()console.log()console.log()console.log()amber
console.log()console.log()console.log()console.log()yellow
console.log()console.log()console.log()console.log()lime
console.log()console.log()console.log()console.log()green
console.log()console.log()console.log()console.log()emerald
console.log()console.log()console.log()console.log()teal
console.log()console.log()console.log()console.log()cyan
console.log()console.log()console.log()console.log()sky
console.log()console.log()console.log()console.log()blue
console.log()console.log()console.log()console.log()indigo
console.log()console.log()console.log()console.log()violet
console.log()console.log()console.log()console.log()purple
console.log()console.log()console.log()console.log()fuchsia
console.log()console.log()console.log()console.log()pink
console.log()console.log()console.log()console.log()rose
console.log()console.log()console.log()console.log()'use client'
import { Code, Stack, Text } from '@chakra-ui/react'
import { colorPalettes } from '../lib/color-palettes'
export const CodeWithColors = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.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 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'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 |