0
# Tabbed Code Interface
1

2
The `CodeHighlightTabs` component provides a tabbed interface for displaying multiple code files with syntax highlighting, ideal for showing examples with multiple files or comparing code across different files.
3

4
## Capabilities
5

6
### CodeHighlightTabs Component
7

8
Component for displaying multiple code files in a tabbed interface.
9

10
```typescript { .api }
11
/**
12
 * Component for displaying multiple code files in a tabbed interface
13
 * @param props - Configuration options for the tabbed code interface
14
 * @returns Rendered tabbed code component
15
 */
16
function CodeHighlightTabs(props: CodeHighlightTabsProps): JSX.Element;
17

18
interface CodeHighlightTabsProps extends 
19
  CodeHighlightSettings,
20
  BoxProps,
21
  StylesApiProps<CodeHighlightTabsFactory>,
22
  ElementProps<'div'> {
23
  /** Code to highlight with meta data (file name and icon) */
24
  code: CodeHighlightTabsCode[];
25
  /** Function that returns icon based on file name */
26
  getFileIcon?: (fileName: string) => React.ReactNode;
27
  /** Default active tab index */
28
  defaultActiveTab?: number;
29
  /** Index of controlled active tab state */
30
  activeTab?: number;
31
  /** Called when tab changes */
32
  onTabChange?: (tab: number) => void;
33
}
34

35
interface CodeHighlightTabsCode {
36
  /** Language for syntax highlighting */
37
  language?: CodeHighlightDefaultLanguage | (string & {});
38
  /** Code content to display */
39
  code: string;
40
  /** File name displayed in the tab */
41
  fileName?: string;
42
  /** Custom icon for the file tab */
43
  icon?: React.ReactNode;
44
}
45

46
/** Available shiki languages for default Mantine shiki instance */
47
type CodeHighlightDefaultLanguage = 'tsx' | 'scss' | 'html' | 'bash' | 'json';
48
```
49

50
**Usage Examples:**
51

52
```typescript
53
import { CodeHighlightTabs } from "@mantine/code-highlight";
54
import { IconBrandReact, IconFileTypeJs } from "@tabler/icons-react";
55

56
// Basic multi-file example
57
function BasicTabs() {
58
  const code = [
59
    {
60
      fileName: 'App.tsx',
61
      code: `import React from 'react';
62

63
function App() {
64
  return <div>Hello World</div>;
65
}
66

67
export default App;`,
68
      language: 'tsx',
69
    },
70
    {
71
      fileName: 'index.js',
72
      code: `import React from 'react';
73
import ReactDOM from 'react-dom';
74
import App from './App';
75

76
ReactDOM.render(<App />, document.getElementById('root'));`,
77
      language: 'javascript',
78
    },
79
    {
80
      fileName: 'styles.css',
81
      code: `.container {
82
  display: flex;
83
  justify-content: center;
84
  align-items: center;
85
  height: 100vh;
86
}`,
87
      language: 'css',
88
    },
89
  ];
90

91
  return <CodeHighlightTabs code={code} />;
92
}
93

94
// With custom icons and controlled state
95
function AdvancedTabs() {
96
  const [activeTab, setActiveTab] = useState(0);
97
  
98
  const code = [
99
    {
100
      fileName: 'Component.tsx',
101
      code: `export function MyComponent() {
102
  return <div>Component</div>;
103
}`,
104
      language: 'tsx',
105
      icon: <IconBrandReact size={16} />,
106
    },
107
    {
108
      fileName: 'utils.js',
109
      code: `export function helper() {
110
  return 'helper';
111
}`,
112
      language: 'javascript',
113
      icon: <IconFileTypeJs size={16} />,
114
    },
115
  ];
116

117
  return (
118
    <CodeHighlightTabs
119
      code={code}
120
      activeTab={activeTab}
121
      onTabChange={setActiveTab}
122
      withCopyButton
123
      withExpandButton
124
    />
125
  );
126
}
127

128
// With file icon function
129
function WithIconFunction() {
130
  const getFileIcon = (fileName: string) => {
131
    if (fileName.endsWith('.tsx') || fileName.endsWith('.jsx')) {
132
      return <IconBrandReact size={16} />;
133
    }
134
    if (fileName.endsWith('.js')) {
135
      return <IconFileTypeJs size={16} />;
136
    }
137
    return null;
138
  };
139

140
  const code = [
141
    { fileName: 'App.tsx', code: 'const App = () => <div>App</div>;', language: 'tsx' },
142
    { fileName: 'utils.js', code: 'export const helper = () => {};', language: 'javascript' },
143
  ];
144

145
  return (
146
    <CodeHighlightTabs
147
      code={code}
148
      getFileIcon={getFileIcon}
149
      defaultActiveTab={0}
150
    />
151
  );
152
}
153

154
// Package.json + source example
155
function PackageExample() {
156
  const projectFiles = [
157
    {
158
      fileName: 'package.json',
159
      code: `{
160
  "name": "my-app",
161
  "version": "1.0.0",
162
  "dependencies": {
163
    "react": "^18.0.0",
164
    "@mantine/core": "^7.0.0"
165
  }
166
}`,
167
      language: 'json',
168
    },
169
    {
170
      fileName: 'src/main.tsx',
171
      code: `import React from 'react';
172
import { createRoot } from 'react-dom/client';
173
import App from './App';
174

175
const root = createRoot(document.getElementById('root')!);
176
root.render(<App />);`,
177
      language: 'tsx',
178
    },
179
    {
180
      fileName: 'vite.config.ts',
181
      code: `import { defineConfig } from 'vite';
182
import react from '@vitejs/plugin-react';
183

184
export default defineConfig({
185
  plugins: [react()],
186
});`,
187
      language: 'typescript',
188
    },
189
  ];
190

191
  return (
192
    <CodeHighlightTabs
193
      code={projectFiles}
194
      withCopyButton
195
      maxCollapsedHeight={300}
196
    />
197
  );
198
}
199
```
200

201
## Factory Types
202

203
```typescript { .api }
204
type CodeHighlightTabsFactory = Factory<{
205
  props: CodeHighlightTabsProps;
206
  ref: HTMLDivElement;
207
  stylesNames: CodeHighlightTabsStylesNames;
208
}>;
209

210
type CodeHighlightTabsStylesNames =
211
  | 'root'
212
  | 'files'
213
  | 'file'
214
  | 'fileIcon'
215
  | 'filesScrollarea'
216
  | CodeHighlightStylesNames;
217
```
218

219
## Component Behavior
220

221
- **Tab Management**: Automatically handles tab switching and validates active tab indices
222
- **File Icons**: Supports both custom icons per file and icon generation functions
223
- **Code Highlighting**: Each tab's code is highlighted according to its specified language
224
- **All CodeHighlight Features**: Inherits all functionality from `CodeHighlight` (copy, expand, custom controls, etc.)
225
- **Responsive Design**: File tabs scroll horizontally when they exceed available width
226
- **State Management**: Supports both controlled and uncontrolled tab selection