React Code Block

Code display for app UIs and docs — RTL snippets, config files, API examples — with zero dependencies: a filename tab with language badge, line numbers, line highlighting with the primary rail, and a diff mode that reads leading +/− markers (added lines wash green, removed wash red, and the copy button strips the markers so pasted code is clean). Pair it with a real highlighter later if you need full syntax color; the structure won't change.

dma_ctrl.vverilog
module dma_ctrl #(
parameter ADDR_W = 32,
parameter DATA_W = 128
) (
input wire aclk,
input wire aresetn,
input wire [ADDR_W-1:0] awaddr,
input wire awvalid,
output wire awready
);
// Write-1-to-clear error flag
always @(posedge aclk or negedge aresetn)
if (!aresetn) err_q <= 1'b0;
else if (wr_err) err_q <= 1'b1;
else if (w1c_err) err_q <= 1'b0;
endmodule
dma_ctrl.vdiff
− localparam FIFO_DEPTH = 16;
+ localparam FIFO_DEPTH = 32;
localparam FIFO_W = DATA_W;
− assign awready = !fifo_full;
+ // Backpressure one cycle early to close timing at 1.2 GHz
+ assign awready = !fifo_almost_full;

Highlighted lines carry the primary rail; diff mode reads leading +/− markers and copies clean code.

Installation

npx shadcn@latest add "http://localhost:3000/registry/code-block.json"

Usage

Loading...

Props

PropTypeDefaultDescription
codestring—The source text
filenamestring—Header tab label
languagestring—Mono badge in the header
showLineNumbersbooleantrueLine-number gutter (excluded from selection)
highlightLinesnumber[][]1-based lines to emphasize
diffbooleanfalseRead leading +/− as diff markers
maxHeightnumber—Scroll the body beyond this height

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.