SenUI Logo

SenCode Component

SenCode renders syntax-highlighted code using Shiki and includes a copy button. It supports tsx, ts, js, and jsx as languages, and these themes: catppuccin-macchiato, dark-plus, one-dark-pro, and monokai.

Theme: catppuccin-macchiato

import { SenButton } from '@/components/ui/SenButton'

export default function Example() {
  return <SenButton>Click Me</SenButton>
}

Theme: dark-plus

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

console.log(greet('World'))

Theme: one-dark-pro

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

console.log(greet('World'))

Theme: monokai

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

console.log(greet('World'))