Code Block Line Numbers 1 - Line numbers

Pro

Code block with lineNumbers enabled on the active snippet.
Shadcn Code Block Line Numbers 1 component

Component data

ID
code-block/code-block-line-numbers-1
Access
pro
Created
May 23, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Code Block Line Numbers 1 component design & features

This example uses Kibo UI CodeBlock with lineNumbers enabled on CodeBlockItem so each line shows a prefixed number alongside highlighted code.

Line numbers help readers reference specific lines in tutorials, changelogs, and support docs that discuss code by line.

Line numbers help readers reference specific lines in tutorials, changelogs, and support docs that discuss code by line.