Code Snippet

Code Snippet displays formatted code blocks in single-line and multi-line layouts with optional tab navigation.

Loading demo: code-snippet-real-world

Installation

npx sdaia-ui@latest add code-snippet

import { CodeSnippet } from "@/components/ui/code-snippet"

<CodeSnippet type="single-line" code="..." />

A compact code snippet for displaying a single line of code.

Loading demo: code-snippet-single-line

Multi-line code snippet with tab navigation for switching between files or examples.

Loading demo: code-snippet-multi-line-tabs

Props for the CodeSnippet component.

Prop	Type	Default	Required
variant	'multi-line-with-tabs' \| 'multi-line-without-tabs' \| 'single-line'	-	required
showHeader	boolean	true for multi-line variants; no effect for single-line.	optional
showLineNumbers	boolean	true for multi-line variants; no effect for single-line.	optional
codeBodyMinHeight	string	-	optional
copyText	string	-	optional
onCopy	() => void \| Promise<void>	-	optional
showMoreButton	boolean	true	optional
showMoreLabel	string	"Show More"	optional
onShowMore	() => void	-	optional
showCopyButton	boolean	true	optional

Multi-line body with language tabs (`Tabs` type `underline`, size `md`).

Prop	Type	Default	Required
variant	'multi-line-with-tabs'	-	required
tabItems	TabItem[]	-	required
tabPanels	Record<string, string>	-	required
tabValue	string	-	optional
defaultTabValue	string	-	optional
onTabValueChange	(value: string) => void	-	optional
showHeader	boolean	true for multi-line variants; no effect for single-line.	optional
showLineNumbers	boolean	true for multi-line variants; no effect for single-line.	optional
codeBodyMinHeight	string	-	optional
copyText	string	-	optional
onCopy	() => void \| Promise<void>	-	optional
showMoreButton	boolean	true	optional
showMoreLabel	string	"Show More"	optional
onShowMore	() => void	-	optional
showCopyButton	boolean	true	optional

Multi-line body with optional file-style header (icon + title).

Prop	Type	Default	Required
variant	'multi-line-without-tabs'	-	required
code	string	-	optional
codeContent	ReactNode	-	optional
lineCount	number	derived from `code`	optional
fileTitle	string	""	optional
headerIcon	ReactNode	-	optional
showHeader	boolean	true for multi-line variants; no effect for single-line.	optional
showLineNumbers	boolean	true for multi-line variants; no effect for single-line.	optional
codeBodyMinHeight	string	-	optional
copyText	string	-	optional
onCopy	() => void \| Promise<void>	-	optional
showMoreButton	boolean	true	optional
showMoreLabel	string	"Show More"	optional
onShowMore	() => void	-	optional
showCopyButton	boolean	true	optional

One-line install / CLI style row.

Prop	Type	Default	Required
variant	'single-line'	-	required
commandPrefix	ReactNode	-	required
command	ReactNode	-	required
showHeader	boolean	true for multi-line variants; no effect for single-line.	optional
showLineNumbers	boolean	true for multi-line variants; no effect for single-line.	optional
codeBodyMinHeight	string	-	optional
copyText	string	-	optional
onCopy	() => void \| Promise<void>	-	optional
showMoreButton	boolean	true	optional
showMoreLabel	string	"Show More"	optional
onShowMore	() => void	-	optional
showCopyButton	boolean	true	optional