Components

Code block

Chat code blocks, Code transcript fences and bash command rows, highlighted with the measured cds-dark palette (github-light in light mode).

Chat

Radius 12 | 10, .5px border (black 8 % | white 4 %), surface-2 at 50 % (#fff 50 % | #1f1f1f 50 %); header 12/17 secondary; code 14/22.75 mono, 14px padding (a 2-line block is ~104 tall). The 28px copy button appears on hover / focus-within (always on touch) and sticks 8px below the top while a tall block scrolls. Keyboard focus on the code draws a 2px accent ring.

bash

npx shadcn-vue@latest initnpx shadcn-vue@latest add button dialog dropdown-menu sidebar

Light (github-light)

typescript

// a small composableimport { computed, shallowRef } from 'vue'
export function useCounter(start = 0) {  const count = shallowRef(start)  const double = computed(() => count.value * 2)  return { count, double, inc: () => count.value++ }}

Dark (cds-dark)

typescript

// a small composableimport { computed, shallowRef } from 'vue'
export function useCounter(start = 0) {  const count = shallowRef(start)  const double = computed(() => count.value * 2)  return { count, double, inc: () => count.value++ }}

Shell palette (variables, strings, comments)

bash

export NAME="world"echo "hello $NAME" # greetls -la ~/projects | grep -v node_modules

Destructive (failed output)

error

Error: Cannot find module 'shiki/core'

Lines

Line numbers, added / removed (git tints) / highlighted lines and wrapping.

Line numbers + diff lines

const theme = 'cds'const radius = 6const radius = 8export default theme

Wrap

 A long line that wraps onto the next line instead of scrolling horizontally, because the wrap prop is set on the content.

Long block: horizontal scroll, sticky copy

javascript

console.log('line 1: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 2: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 3: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 4: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 5: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 6: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 7: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 8: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 9: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 10: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 11: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 12: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 13: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 14: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 15: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 16: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 17: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 18: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 19: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 20: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 21: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 22: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 23: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 24: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 25: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 26: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 27: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 28: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 29: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 30: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 31: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 32: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 33: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 34: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 35: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 36: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 37: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 38: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 39: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')console.log('line 40: a long line that scrolls horizontally inside the block instead of wrapping onto the next line')

Code transcript

fence: surface-2, radius 8, no header, a 24px copy button. command: the bash tool row, a non-copied "$" prompt, mono 12/17, a 1px ring and a 20px copy that fades in 100 ms after hover; tool output below it.

fence

// a small composableimport { computed, shallowRef } from 'vue'
export function useCounter(start = 0) {  const count = shallowRef(start)  const double = computed(() => count.value * 2)  return { count, double, inc: () => count.value++ }}

command + tool output

pnpm exec nuxt typecheck

 ✔ Nuxt typecheck: 0 errors in 412 files