CodeBlock

Setup

import { CodeBlock } from '@fragments-sdk/ui';

Examples

Loading preview...

Props

Prop	Type	Default	Description
`code`Required	`string`	Not set	The code string to display
`language`	`enumtsxtypescripttsjavascriptjsjsxbashshellcssscsssassjsonhtmlxmlmarkdownmdyamlymlpythonpyrubygorustjavakotlinswiftccppcsharpphpsqlgraphqldiffplaintexttext`	`tsx`	Programming language for syntax highlighting
`theme`	`enumsynthwave-84github-darkgithub-lightone-dark-prodraculanordmonokaivitesse-darkvitesse-lightmin-darkmin-light`	`one-dark-pro`	Syntax highlighting theme
`showCopy`	`boolean`	`true`	Whether to show the copy button
`title`	`string`	Not set	Optional title displayed above the code block (external label)
`filename`	`string`	Not set	Optional filename shown in header bar inside code block
`caption`	`string`	Not set	Optional caption displayed below the code block
`showLineNumbers`	`boolean`	`false`	Whether to display line numbers
`startLineNumber`	`number`	`1`	Starting line number (useful for code excerpts)
`highlightLines`	`array`	Not set	Lines to highlight (e.g., [1, 3, "5-7"])
`addedLines`	`array`	Not set	Lines marked as added in diff view (e.g., [2, "4-6"])
`removedLines`	`array`	Not set	Lines marked as removed in diff view (e.g., [1, 3])
`wordWrap`	`boolean`	`false`	Enable word wrapping for long lines
`maxHeight`	`number`	Not set	Maximum height in pixels (enables scrolling)
`collapsible`	`boolean`	`false`	Allow collapsing/expanding the code block
`defaultCollapsed`	`boolean`	`false`	Initial collapsed state (only applies when collapsible is true)
`collapsedLines`	`number`	`5`	Number of lines to show when collapsed
`compact`	`boolean`	`false`	Compact mode with reduced padding
`persistentCopy`	`boolean`	`false`	Show a persistent copy button that is always visible
`copyPlacement`	`enumautoheaderoverlay`	`auto`	Where to place the copy button when not using persistentCopy
`bg`	`string`	Not set	Custom background color for the code block (useful when the content area is pure black or dark gray)
`onCopy`	`function`	Not set	Callback fired when the copy button is clicked and copy succeeds

Usage Guidelines

When to use

Displaying code examples in documentation
Showing installation commands
Presenting configuration snippets
Teaching programming concepts
Showing code diffs or changes
Displaying long code files with collapse functionality

When not to use

User-editable code (use code editor)
Very short inline code (use <code> element)
Non-code content (use Text or Card)

Best practices

Always specify the correct language for accurate highlighting
Use filename prop to show source file name in header bar
Use copyPlacement="auto" to render copy in overlay mode when no filename is provided
Use title prop for external labels above the code block
Enable line numbers for longer code samples
Use highlightLines to draw attention to key lines
Use addedLines/removedLines for diff highlighting
Set maxHeight for very long code blocks to prevent layout issues
Use collapsible for code samples that users may want to skim
Choose a theme that matches your documentation style
Keep code examples concise and focused
Use CodeBlock.Tabbed for multi-language snippets; tabs support controlled value/onValueChange and explicit tab values

Accessibility

Code is presented in a semantic pre/code structure
Copy button has appropriate aria-label
Keyboard accessible copy functionality
Collapse button has aria-expanded state

Cardparent

Can be wrapped in Card for additional context

Tabschild

Use in Tabs for showing code in multiple languages

Setup

Examples

Default

With Filename

With Title

With Caption

With Line Numbers

Custom Start Line

With Highlighted Lines

Diff View

GitHub Dark Theme

GitHub Light Theme

Dracula Theme

Word Wrap

Max Height with Scroll

Collapsible

JSON

Without Copy Button

Props

Usage Guidelines

When to use

When not to use

Best practices

Setup

Examples

Default

With Filename

With Title

With Caption

With Line Numbers

Custom Start Line

With Highlighted Lines

Diff View

GitHub Dark Theme

GitHub Light Theme

Dracula Theme

Word Wrap

Max Height with Scroll

Collapsible

JSON

Without Copy Button

Props

Usage Guidelines

When to use

When not to use

Best practices

Related Components