Code

Renders an inline <code> element or a block-level <pre><code> for multi-line code snippets. The background color can be customized with the color prop.

Inline

Use npm install @davaux/ui to add the package to your project.

<p>Use <Code>npm install @davaux/ui</Code> to add the package.</p>

Block

import { Button } from '@davaux/ui'

export default function Page() {
  return <Button>Hello</Button>
}
<Code block>
  {`import { Button } from '@davaux/ui'

export default function Page() {
  return <Button>Hello</Button>
}`}
</Code>

Custom background color

blue backgroundgreen backgroundorange background
<Code color="var(--dv-color-blue-light)">blue background</Code>
<Code color="var(--dv-color-green-light)">green background</Code>

Props

PropTypeDefaultDescription
blockbooleanfalseRenders a block-level <pre><code> instead of inline
colorstring—Background color of the code element — any CSS color
classstring—Additional CSS class names
styleobject—Inline styles
childrenReactNode—Code content to display