Ivaldi | ui

Anatomy

<Code />

<CodeBlock>
  {children}
</CodeBlock>

Usage

import { Code, CodeBlock } from '@ivaldi/ui'

<p>
  Use the <Code>useState</Code> hook to manage local state in React.
</p>

Inline Code with Color Variants

You can use different color variants for emphasis:

<div className="flex flex-col gap-2">
  <Code color="primary">npm install @ivaldi/ui</Code>
  <Code color="success">✓ Test passed</Code>
  <Code color="warning">⚠️ Deprecated</Code>
  <Code color="danger">❌ Error</Code>
  <Code color="accent">🎨 Styled</Code>
</div>

Code Block with Syntax Highlighting

For larger code snippets, use the CodeBlock component:

<CodeBlock 
  language="typescript" 
  isCopyable 
  isExpandable
>
  {`function greet(name: string) {
  console.log(\`Hello, \${name}!\`);
}

greet("World");`}
</CodeBlock>

Code Block Without Controls

You can disable the copy and fullscreen buttons:

<CodeBlock 
  language="css" 
  isCopyable={false} 
  isExpandable={false}
>
  {`.example {
  color: blue;
  font-weight: bold;
}`}
</CodeBlock>

Line Numbers

You can show line numbers in code blocks:

<CodeBlock 
  language="javascript" 
  showLineNumbers
  isCopyable
>
  {`// This is a comment
function add(a, b) {
  return a + b;
}

const result = add(1, 2);
console.log(result); // 3`}
</CodeBlock>

Code Props

An inline code component that provides syntax highlighting

Prop	Type	Default

Code.Block Props

A block code component with advanced features

Prop	Type	Default
`children*`	`string \| string[]`	—
`isCopyable`	`boolean`	—
`isExpandable`	`boolean`	`"true"`