fma-ds

Code Block

A code block with shiki syntax highlighting, for docs and AI chat UIs. <CodeBlock code={code} language="tsx" /> is complete on its own.

Data displaythird-partyMITChangelogRegistry JSON

Overview

Parts

  • `CodeBlockHeader`: the chrome — CodeBlockTitle, CodeBlockLanguage, CodeBlockWrapToggle, CodeBlockCopyButton, CodeBlockDownloadButton.
  • `CodeBlockExpandButton`: with maxLines.
  • `CodeBlockContent`: to place inside your own scroll container.
  • `CodeBlockLineActions`: one action group on the hovered or focused line.

A pinned copy button stays put while the code scrolls.

Highlighting

shiki loads lazily on the first highlight (JavaScript regex engine, no WebAssembly) through the code-block-highlight lib. Pass lines from highlightCode() in a server loader, or highlight={false}, to never load it. Light and dark token colors switch with the theme.

Lines

  • Marking: showLineNumbers/startLine, highlightedLines/highlightedWords/focusedLines (line specs like "2-4,7"), diff and lineLevels — or shiki transformers.
  • `streaming`: grows the code with a caret and stick-to-bottom, re-rendering only changed lines.
  • `foldable`: folds by indentation.
  • `selectable`: turns lines into a multi-select listbox.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/code-block

    Files land in components/fma-ds/code-block.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0
Registry
@fma-ds/button@fma-ds/copy-button@fma-ds/code-block-highlight