CodeBlock

A sample of code, as written.

Import it from rei-kit: import { CodeBlock } from 'rei-kit'

Open CodeBlock in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { CodeBlock } from 'rei-kit'

const INSTALL = `pnpm add rei-kit
# then, in src/assets/main.css
@import 'tailwindcss';
@import 'rei-kit/web.css';`
</script>

<template>
  <CodeBlock
    :code="INSTALL"
    label="Installing the package"
    language="bash"
    copy-label="Copy the snippet"
    copied-label="Copied"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`code`	`string`	yes	The sample itself. Shown exactly as given.
`label`	`string`	yes	Names the block, e.g. "Installing the package". Required because this is a region a reader can land in, and an unnamed one is announced as nothing at all.
`language`	`string`	undefined	Shown in the corner, e.g. `bash`, `ts`. Not used to highlight anything.
`wrap`	`boolean`	false	Break long lines instead of scrolling sideways.
`copyLabel`	`string`	undefined	Given together with `copiedLabel`, adds a copy button. Already translated.
`copiedLabel`	`string`	undefined

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub