Lucent UI
← ColorSwatchCodeBlockTable →
✦ LLM-ready

CodeBlock

atom

Styled code display with optional tabs, a language label, copy-to-clipboard, and an AI prompt variant. Zero-dependency — no syntax highlighting library bundled.

"Add a CodeBlock from lucent-ui to display a code snippet. Show a language label and copy-to-clipboard button."

Usage

React / JSX
import { CodeBlock } from 'lucent-ui'

<CodeBlock code="<Button variant='primary'>Save</Button>" language="tsx" variant="code" showCopyButton />

Installation

pnpm add lucent-ui

API Reference

CodeBlock props — * required

PropTypeDefaultDescription
codestring"<Button variant='primary'>Save</Button>"Code string — used in single (non-tabbed) mode.
languagestring"tsx"Language label shown in the header. Purely cosmetic.
tabs{ label: string; code: string; language?: string; icon?: string }[]—Tabbed mode. Each entry has label, code, optional language and icon. Switching tabs resets copy state.
variant"code" | "prompt""code""code" renders a scrollable pre/code block. "prompt" renders a single-line truncated span suited to AI tool prompts.
helperTextstring—Descriptive text rendered between the tab bar and the code area.
showCopyButtonbooleantrueRenders a copy-to-clipboard button. Shows a 'Copied!' confirmation for 2s on success.