fetaUI
GitHub

Code Block

Code on the Soft tray: file name and Copy above, numbered lines in an inset card, with highlights and diffs.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/code-block
Playground
button.tsx· tsx
 import { Button } from "@/components/ui/button"
 
 export function Review() {
   return <Button variant="secondary">Review changes</Button>
 }
Lines
   return <Button variant="secondary">Review changes</Button>
   return <Button variant="secondary">Review changes</Button>
+  return <Button variant="secondary">Review changes</Button>
−  return <Button variant="secondary">Review changes</Button>
Default, press Copy
button.tsx· tsx
 import { Button } from "@/components/ui/button"
 
 export function Review() {
   return <Button variant="secondary">Review changes</Button>
 }
Highlighted
button.tsx· tsx
 import { Button } from "@/components/ui/button"
 
 export function Review() {
   return <Button variant="secondary">Review changes</Button>
 }
Diff
button.tsx· tsx
 import { Button } from "@/components/ui/button"
 
 export function Review() {
−  return <Button>Review</Button>
+  return <Button variant="secondary">Review changes</Button>
 }
Collapsed
button.tsx· tsx
 import { Button } from "@/components/ui/button"
 
 export function Review() {
   return <Button variant="secondary">Review changes</Button>
 }
State
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/code-block

Accessibility

  • Rendered in pre and code, with the language as a label.
  • Copied is announced politely.
  • Diff signs are real characters, so screen readers read them.

Motion

  • Copy crossfades to Copied in 150 ms and returns after 2 s.
  • Marked lines wash in over 200 ms with a 40 ms stagger, and their bar grows.
  • Show more opens in 300 ms.
  • With reduced motion, Copy swaps and the block jumps open.

Responsive behavior

  • Lines never wrap: the card scrolls sideways.
  • Copy code shortens to Copy on Mobile.

Performance

  • Rows and the copied text are memoized from code or lines.
  • Collapsible renders only the first five lines until opened.
  • highlight is a small tokeniser with no dependency, and it runs on render for each line.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import CodeBlock, CodeBlockLine and highlight. Pass code, or lines to mark them with variant: default, highlighted, added, removed.
  • Other props: fileName, language, collapsible, copyLabel, animated.
  • Copy leaves out removed lines. It uses the clipboard API and shows a message if that fails.
  • collapsible is for blocks over about 12 lines. To bring your own highlighter, pass nodes to CodeBlockLine.
/docs/components/code-block/markdown
PreviousProduct Details
NextCode Output

Related

Code OutputComponentA command and its output, streaming while it runs, then a settled mark.JSON ViewComponentAn API response explorer: a tree you can fold, search and copy from.Diff ReviewProComponentReview what the agent changed, file by file, with accept and reject on every file and for the whole change. Version History does the same for documents.TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.