SDAIA Design System

Code Snippet

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

Loading preview…

1'use client';

3import { CodeSnippet } from 'sdaia-ui';

5const CODE = `// Imports

Installation

npx sdaia-ui@latest add code-snippet

Usage

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

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

Examples

Single Line

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

Loading preview…

1'use client';

3import { CodeSnippet } from 'sdaia-ui';

5export default function CodeSnippetSingleLine() {

Multi Line with Tabs

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

Loading preview…

1'use client';

3import { CodeSnippet } from 'sdaia-ui';

5const SAMPLE_JAVA = `// Imports

API Reference

CodeSnippetBaseProps

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

CodeSnippetMultiLineTabsProps

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

CodeSnippetMultiLineFileProps

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

CodeSnippetSingleLineProps

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

// Imports import mongoose, { Schema } from 'mongoose' // Collection name export const collection = 'Design' // Schema const schema = new Schema({ name: { type: String, required: true, }, version: { type: Number, default: 1,

// Imports import mongoose, { Schema } from 'untitled' // Collection name export const collection = 'Design' // Schema const schema = new Schema({ name: { type: String, required: true }, description: { type: String }

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

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

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

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

Code Snippet

Installation

Usage

Examples

Single Line

Multi Line with Tabs

API Reference

CodeSnippetBaseProps

CodeSnippetMultiLineTabsProps

CodeSnippetMultiLineFileProps

CodeSnippetSingleLineProps

Code Snippet

Environment Setup

Installation

Usage

Examples

Single Line

Multi Line with Tabs

API Reference

CodeSnippetBaseProps

CodeSnippetMultiLineTabsProps

CodeSnippetMultiLineFileProps

CodeSnippetSingleLineProps

Environment Setup