Code Block

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

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

Props

CodeBlock props
Prop	Type	Description
`tabs` (required)	`Array<CodeBlockTab>`	One or more code tabs to display
`className`	`string`	Additional CSS classes

Required.

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

Usage

Single-line code with no title

pnpm add sanity

1import { CodeBlock } from "@sanity/sanity-id/components/code-block"
2
3export default () => {
4        return (
5          <CodeBlock tabs={[{ code: `pnpm add sanity`, language: "shell" }]} />
6        )
7      }

Single-line code with title

query.groq

*[_type == "page" && slug.current == $slug][0] { title }

1import { CodeBlock } from "@sanity/sanity-id/components/code-block"
2
3export default () => {
4        return (
5          <CodeBlock tabs={[{ title: "query.groq", language: "groq", code: `*[_type == "page" && slug.current == $slug][0] { title }` }]} />
6        )
7      }

Code with unsupported language

Occaecat mollit pariatur ipsum do laboris et dolore mollit excepteur nisi ullamco cillum ea aliquip ad.

1import { CodeBlock } from "@sanity/sanity-id/components/code-block"
2
3export default () => {
4        return (
5          <CodeBlock tabs={[{ language: "fake-language", code: `Occaecat mollit pariatur ipsum do laboris et dolore mollit excepteur nisi ullamco cillum ea aliquip ad.` }]} />
6        )
7      }

Single-line code with multiple tabs

pnpm add sanity

1import { CodeBlock } from "@sanity/sanity-id/components/code-block"
2
3export default () => {
4        return (
5          <CodeBlock
6            tabs={[
7              { title: "PNPM", language: "shell", code: `pnpm add sanity` },
8              { title: "NPM", language: "shell", code: `npm install sanity` },
9              { title: "Bun", language: "shell", code: `bun install sanity` },
10            ]}
11          />
12        )
13      }

Multiple-line code with no title

1// Single workspace configuration
2
3      import {defineConfig} from 'sanity'
4      import {structureTool} from 'sanity/structure'
5      import {schemaTypes} from './schemas'
6
7      // Ad pariatur magna tempor qui excepteur id nostrud ea excepteur consequat. In minim aute veniam occaecat anim esse magna ex eu dolore nostrud sint.
8      export default defineConfig({
9      projectId: '<projectId>',
10      dataset: 'production',
11      plugins: [structureTool()],
12      schema: {
13        types: schemaTypes,
14      },
15      })

1import { CodeBlock } from "@sanity/sanity-id/components/code-block"
2
3export default () => {
4                return (
5                  <CodeBlock
6                    tabs={[
7                      {
8                        highlightLines: [7],
9                        language: "typescript",
10                        code: `
11      // Single workspace configuration
12
13      import {defineConfig} from 'sanity'
14      import {structureTool} from 'sanity/structure'
15      import {schemaTypes} from './schemas'
16
17      // Ad pariatur magna tempor qui excepteur id nostrud ea excepteur consequat. In minim aute veniam occaecat anim esse magna ex eu dolore nostrud sint.
18      export default defineConfig({
19      projectId: '<projectId>',
20      dataset: 'production',
21      plugins: [structureTool()],
22      schema: {
23        types: schemaTypes,
24      },
25      })
26                        `,
27                      },
28                    ]}
29                  />
30                )
31              }

Multiple-line code with title

sanity.config.ts

1// Single workspace configuration
2
3      import {defineConfig} from 'sanity'
4      import {structureTool} from 'sanity/structure'
5      import {schemaTypes} from './schemas'
6
7      export default defineConfig({
8      projectId: '<projectId>',
9      dataset: 'production',
10      plugins: [structureTool()],
11      schema: {
12        types: schemaTypes,
13      },
14      })

1import { CodeBlock } from "@sanity/sanity-id/components/code-block"
2
3export default () => {
4                return (
5                  <CodeBlock
6                    tabs={[
7                      {
8                        title: "sanity.config.ts",
9                        language: "typescript",
10                        code: `
11      // Single workspace configuration
12
13      import {defineConfig} from 'sanity'
14      import {structureTool} from 'sanity/structure'
15      import {schemaTypes} from './schemas'
16
17      export default defineConfig({
18      projectId: '<projectId>',
19      dataset: 'production',
20      plugins: [structureTool()],
21      schema: {
22        types: schemaTypes,
23      },
24      })
25                        `,
26                      },
27                    ]}
28                  />
29                )
30              }

Multiple-line code with multiple tabs

1// Single workspace configuration
2
3      import {defineConfig} from 'sanity'
4      import {structureTool} from 'sanity/structure'
5      import {schemaTypes} from './schemas'
6
7      export default defineConfig({
8      projectId: '<projectId>',
9      dataset: 'production',
10      plugins: [structureTool()],
11      schema: {
12        types: schemaTypes,
13      },
14      })

1import { CodeBlock } from "@sanity/sanity-id/components/code-block"
2
3export default () => {
4                return (
5                  <CodeBlock
6                    tabs={[
7                      {
8                        title: "sanity.config.ts",
9                        language: "typescript",
10                        highlightLines: [4],
11                        code: `
12      // Single workspace configuration
13
14      import {defineConfig} from 'sanity'
15      import {structureTool} from 'sanity/structure'
16      import {schemaTypes} from './schemas'
17
18      export default defineConfig({
19      projectId: '<projectId>',
20      dataset: 'production',
21      plugins: [structureTool()],
22      schema: {
23        types: schemaTypes,
24      },
25      })
26                        `,
27                      },
28                      {
29                        title: "schemas.ts",
30                        language: "typescript",
31                        code: `
32      import {defineType,defineField} from 'sanity'
33      import {structureTool} from 'sanity/structure'
34      import {schemaTypes} from './schemas'
35
36      export default [
37      defineType({
38        name: "person",
39        type: "object",
40        fields: [
41          defineField({
42            name: "name",
43            type: "string",
44          })
45        ]
46      })
47      ]
48                        `,
49                      },
50                    ]}
51                  />
52                )
53              }