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

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>
  );
}
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel