Code Block

A content-aware code container with syntax highlighting and copy functionality. Supports custom slot headers for package manager tabs.

Installation

npx raya-ui@latest add code-block

File Structure

your-project

components

code-block

CodeBlock.vue

API Reference

Props

code

string

The raw code string to highlight and display.

lang

string

"typescript"

Language for syntax highlighting.

fileName

string

undefined

Optional text to display in the header bar. Omitted if the #header slot is used.

Slots

#header

Custom content for the header bar (e.g., placing AnimatedTabs inside). Completely overrides the fileName prop.

app.ts

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

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

Settings

Use Header Slot (Tabs)

File Name

Language

source-code.vue

<script setup lang="ts">
import { CodeBlock } from '@/components/ui/code-block'

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

console.log(greet('Raya UI'));`
</script>

<template>
  <CodeBlock
    :code="code"
    file-name="app.ts"
  />
</template>