Code

CodeBlock

Syntax-highlighted code block with line numbers, copy button, and language support using Shiki.

use-debounce.ts

import { useState, useCallback } from 'react';
export function useDebounce<T>(value: T, delay: number): T {  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {    const timer = setTimeout(() => setDebouncedValue(value), delay);    return () => clearTimeout(timer);  }, [value, delay]);
  return debouncedValue;}

Props

Prop	Type	Default	Description
code	string	-	The code content to display
language	BundledLanguage	-	Programming language for syntax highlighting
showLineNumbers	boolean	false	Whether to display line numbers
className	string	-	Additional CSS classes

Import

import { CodeBlock, CodeBlockHeader, CodeBlockContent, CodeBlockCopyButton } from '@blastx/ui-ai';