Code Block

A content-aware code container with syntax highlighting and copy functionality. 

function greet(name: string) {
  return `Hello, ${name}!`;
}

console.log(greet('Raya'));

With Filename

Adding a file-name prop automatically creates a header bar.

Terminal
npx shadcn-vue@latest add https://raya-ui.com/registry/code-block.json

With Animated Tabs

You can place AnimatedTabs directly inside the #header slot. 

npm install raya-ui

Props

PropTypeDescription
codestringThe raw code string to highlight.
langstringLanguage for syntax highlighting (default: 'typescript').
fileNamestringOptional text to display in a header bar (if no header slot).

Slots

SlotDescription
#header Custom content for the header bar (e.g., AnimatedTabs). Overrides fileName.