Code

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.

Source @chakra-ui/layout

Import#

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

Usage#

<Code>Hello world</Code>

Colors#

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

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

The Code component is a single part component. All of the styling is applied directly to the code element.

To learn more about styling single part components, visit the Component Style page.

Theming properties#

The properties that affect the theming of the Code component are:

variant: The visual variant of the code. Defaults to subtle.
colorScheme: The color scheme of the code. Defaults to gray.

Theming utilities#

defineStyle: a function used to create style objects.
defineStyleConfig: a function used to define the style configuration for a single part component.

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

Customizing the default theme#

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

const outline = defineStyle({
  border: '2px dashed', // change the appearance of the border
  borderRadius: 0, // remove the border radius
  fontSize: 'md', // change the font size
  fontWeight: 'semibold', // change the font weight
})

export const codeTheme = defineStyleConfig({
  variants: { outline },
})

After customizing the code theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { codeTheme } from './components/code'

export const theme = extendTheme({
  components: { Code: codeTheme },
})

This is a crucial step to make sure that any changes that we make to the Code theme are applied.

Adding a custom variant#

Let's assume we want to include a custom branded variant. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

const brandPrimary = defineStyle({
  background: 'orange.500',
  color: 'white',
  fontFamily: 'mono',
  fontWeight: 'normal',

  // let's also provide dark mode alternatives
  _dark: {
    background: 'orange.300',
    color: 'orange.800',
  }
})

export const codeTheme = defineStyleConfig({
  variants: { brandPrimary },
})

// Now we can use the new `brandPrimary` variant
<Code variant="brandPrimary">...</Code>

Using a custom color scheme#

Let's assume we want to use our own custom color scale based on our brand. We'd need to define the color scale first in the main theme file:

import { extendTheme } from '@chakra-ui/react'

export const theme = extendTheme({
  colors: {
    brand: {
      50: '#f7fafc',
      ...
      500: '#718096',
      ...
      900: '#171923',
    }
  }
})

Then, we can use the custom color scale as the color scheme for the Code:

<Code colorPalette='brand'>...</Code>

Changing the default properties#

Let's assume we want to change the default size, variant or color scheme of every code in our app. Here's how we can do that:

import { defineStyleConfig } from '@chakra-ui/react'

export const codeTheme = defineStyleConfig({
  defaultProps: {
    variant: 'outline',
    colorScheme: 'brand',
  },
})

// This saves you time, instead of manually setting the size,
// variant and color scheme every time you use a Code:
<Code variant="outline" colorPalette="brand">...</Code>

Showcase#

import { Box, Flex, IconButton, Code, useColorMode } from "@chakra-ui/react";
import { FaMoon, FaSun } from "react-icons/fa";

export default function App() {
  const { toggleColorMode, colorMode } = useColorMode();
  return (
    <Box position="relative" h="100vh">
      <Flex wrap="wrap" gap={12} p={12}>
        <Code colorScheme="green">console.log('Themed Green Code')</Code>
        <Code variant="custom">console.log('Themed Custom Variant Code')</Code>
        <Code variant="solid">console.log('Themed Solid Variant Code')</Code>
        <Code variant="outline">
          console.log('Themed Outline Variant Code')
        </Code>
      </Flex>

      <IconButton
        aria-label="toggle theme"
        rounded="full"
        size="xs"
        position="absolute"
        bottom={4}
        left={4}
        onClick={toggleColorMode} icon={colorMode === "dark" ? <FaSun /> : <FaMoon />}
      />
    </Box>
  );
}

Open Sandbox

Edit this page on GitHub