---
title: "Code Block"
description: "A tabbed code sample with syntax highlighting and optional line numbers."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/code-block"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/code-block.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Code Block

A tabbed code sample with syntax highlighting and optional line numbers.

```tsx
import { CodeBlock } from "@sanity/sanity-id/components/code-block"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `tabs` | `Array<CodeBlockTab>` | yes | — | One or more code tabs to display |
| `className` | `string` | no | — | Additional CSS classes |

`CodeBlockTab`: `{ code: string; language: string; highlightLines?: number[]; showLineNumbers?: boolean; title?: string }`

## Usage

### Single-line code with no title

```tsx
import { CodeBlock } from "@sanity/sanity-id/components/code-block"

export default () => {
	return (
		<CodeBlock tabs={[{ code: `pnpm add sanity`, language: "shell" }]} />
	)
}
```

### Single-line code with title

```tsx
import { CodeBlock } from "@sanity/sanity-id/components/code-block"

export default () => {
	return (
		<CodeBlock tabs={[{ title: "query.groq", language: "groq", code: `*[_type == "page" && slug.current == $slug][0] { title }` }]} />
	)
}
```

### Code with unsupported language

```tsx
import { CodeBlock } from "@sanity/sanity-id/components/code-block"

export default () => {
	return (
		<CodeBlock tabs={[{ language: "fake-language", code: `Occaecat mollit pariatur ipsum do laboris et dolore mollit excepteur nisi ullamco cillum ea aliquip ad.` }]} />
	)
}
```

### Single-line code with multiple tabs

```tsx
import { CodeBlock } from "@sanity/sanity-id/components/code-block"

export default () => {
	return (
		<CodeBlock
			tabs={[
				{ title: "PNPM", language: "shell", code: `pnpm add sanity` },
				{ title: "NPM", language: "shell", code: `npm install sanity` },
				{ title: "Bun", language: "shell", code: `bun install sanity` },
			]}
		/>
	)
}
```

### Multiple-line code with no title

```tsx
import { CodeBlock } from "@sanity/sanity-id/components/code-block"

				export default () => {
					return (
						<CodeBlock
							tabs={[
								{
									highlightLines: [7],
									language: "typescript",
									code: `
// Single workspace configuration

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {schemaTypes} from './schemas'

// Ad pariatur magna tempor qui excepteur id nostrud ea excepteur consequat. In minim aute veniam occaecat anim esse magna ex eu dolore nostrud sint.
export default defineConfig({
projectId: '<projectId>',
dataset: 'production',
plugins: [structureTool()],
schema: {
  types: schemaTypes,
},
})
									`,
								},
							]}
						/>
					)
				}
```

### Multiple-line code with title

```tsx
import { CodeBlock } from "@sanity/sanity-id/components/code-block"

				export default () => {
					return (
						<CodeBlock
							tabs={[
								{
									title: "sanity.config.ts",
									language: "typescript",
									code: `
// Single workspace configuration

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {schemaTypes} from './schemas'

export default defineConfig({
projectId: '<projectId>',
dataset: 'production',
plugins: [structureTool()],
schema: {
  types: schemaTypes,
},
})
									`,
								},
							]}
						/>
					)
				}
```

### Multiple-line code with multiple tabs

```tsx
import { CodeBlock } from "@sanity/sanity-id/components/code-block"

				export default () => {
					return (
						<CodeBlock
							tabs={[
								{
									title: "sanity.config.ts",
									language: "typescript",
									highlightLines: [4],
									code: `
// Single workspace configuration

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {schemaTypes} from './schemas'

export default defineConfig({
projectId: '<projectId>',
dataset: 'production',
plugins: [structureTool()],
schema: {
  types: schemaTypes,
},
})
									`,
								},
								{
									title: "schemas.ts",
									language: "typescript",
									code: `
import {defineType,defineField} from 'sanity'
import {structureTool} from 'sanity/structure'
import {schemaTypes} from './schemas'

export default [
defineType({
  name: "person",
  type: "object",
  fields: [
    defineField({
      name: "name",
      type: "string",
    })
  ]
})
]
									`,
								},
							]}
						/>
					)
				}
```