Components

Code groups

Show tabbed code samples and richer single blocks with filenames and highlights.

Plain fenced code blocks already render with syntax highlighting, a language label, and a copy button. Reach for these components when you want tabbed alternatives or extra chrome like a filename and highlighted lines.

Code groups

<CodeGroup> turns several fenced blocks into a tabbed set. The tab label is the title written after the language on the fence line.

npm i -g @veluai/velu

<CodeGroup>
```bash npm
npm i -g @veluai/velu
```

```bash pnpm
pnpm add -g @veluai/velu
```

```bash yarn
yarn global add @veluai/velu
```
</CodeGroup>

Set defaultIndex to choose which tab opens first (tabs are zero-indexed).

Single code blocks

Use <CodeBlock> when you want a filename, line numbers, or highlighted lines on a standalone block.

1{
2"name": "Acme Docs",
3"colors": { "primary": "#dc143c" }
4}

<CodeBlock filename="velu.json" language="json" lineNumbers highlight="2">
{`{
  "name": "Acme Docs",
  "colors": { "primary": "#dc143c" }
}`}
</CodeBlock>

For most code, a plain fenced block is enough. Add a filename after the language on the fence line to label it without reaching for <CodeBlock>.

CodeBlock properties

filenamestring

A filename shown in the block's header, with a matching file-type icon.

titlestring

A label for the block's header when it isn't a filename.

languagestring

The language used for syntax highlighting, such as json or bash.

lineNumbersbooleandefault: false

Show a line-number gutter.

highlightstring

A range of lines to emphasize, such as "1-3,5".

iconstring

A Lucide icon id for the block header.

withIconbooleandefault: false

Show the file-type or language icon in the header.

CodeGroup properties

defaultIndexnumberdefault: 0

The zero-based index of the tab shown first.

Was this page helpful?

Steps

File trees