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.

chakra ui pro

Import#

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

Usage#

Hello world
Editable Example

Colors#

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

console.log(welcome)var chakra = 'awesome!'npm install chakra
Editable Example

Props#

colorScheme

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Default
"gray"

size

Description

Sizes for Code are not implemented in the default theme. You can extend the theme to implement them.

Type
string

variant

Type
"outline" | "solid" | "subtle"
Default
"subtle"

Proudly made inNigeria by Segun Adebayo