CodeSnippet

React code block with language tabs, line numbers, a copy button, Show More collapsing, and an inline variant. Code stays left to right in Arabic pages.

Open in Storybook ↗

CodeSnippet takes a languages array; more than one entry shows tabs. Use maxLines for a Show More toggle, and CodeSnippetInline for one-line commands. Code always renders left to right.

When to use

Use CodeSnippet in developer documentation, API portals, and integration guides. Pass several languages to show tabs, use maxLines for long samples, and CodeSnippetInline for single commands or values inside a sentence.

Examples

Multiple languages

// Fetch the national service catalogconst res = await fetch(  'https://api.gov.example.sa/v1/services',);const services = await res.json();console.log(services.length);

Single language, no line numbers

export const config = {  authority: 'Digital Government Authority',  region: 'sa-central-1',  retries: 3,};

Collapsible with Show More

# Permit request schemafrom pydantic import BaseModelclass PermitRequest(BaseModel):    citizen_id: str    service_code: str    ministry: str    submitted_at: str    status: str = "pending"    priority: int = 3# Instancerequest = PermitRequest(    citizen_id="1000000000",    service_code="BLD-204",    ministry="Municipal Affairs",    submitted_at="2026-07-02",)

Inline command

pnpmpnpm add @dev-dga/react @dev-dga/css

npmnpm install @dev-dga/react

Props

Props declared by CodeSnippet. Native attributes of the underlying element pass through.

<CodeSnippet>

Prop	Type	Default	Description
`languages`required	`CodeSnippetLanguage[]`		One entry per language. A single entry hides the tab bar (SDGA single-tab).
`value`	`string`		Controlled active language.
`defaultValue`	`string`		Uncontrolled initial active language (defaults to the first).
`onValueChange`	`(value: string) => void`
`lineNumbers`	`boolean`	`true`	Render the line-number gutter.
`maxLines`	`number`		Collapse to this many lines with a Show More toggle when exceeded.
`renderCode`	`(ctx: { code: string; language: string; }) => ReactNode`		Escape hatch: render highlighted code yourself; the active `code` still drives copy + line count.
`onCopy`	`(text: string) => void`
`copyLabel`	`string`	`'Copy code'`	Accessible name for the copy button.
`copiedLabel`	`string`	`'Copied'`	Live-region text announced after a successful copy.

<CodeSnippetInline>

Prop	Type	Default	Description
`children`required	`string`		The command text - copied verbatim.
`prefix`	`react.ReactNode`		Leading label (e.g. `npm`) - rendered in gold.
`onCopy`	`(text: string) => void`
`copyLabel`	`string`	`'Copy code'`	Accessible name for the copy button.
`copiedLabel`	`string`	`'Copied'`	Live-region text announced after a successful copy.

Accessibility

The copy button has an accessible name and announces success through a live region. The Show More toggle exposes aria-expanded.

Code is rendered inside <pre> and <code> with a forced left-to-right direction, so it reads correctly inside Arabic content. Tabs are keyboard operable.