> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Code Snippet
> A code snippet component for displaying code with syntax highlighting
export const CodeSnippetReactComponentExamplePreview = () => ;
export const CodeSnippetInstallationExamplePreview = () => ;
export const CodeSnippetApiResponseExamplePreview = () => ;
export const CodeSnippetLineNumbersExamplePreview = () => ;
export const CodeSnippetCopyButtonExamplePreview = () => ;
export const CodeSnippetCssExamplePreview = () => ;
export const CodeSnippetPythonExamplePreview = () => ;
export const CodeSnippetJavaScriptExamplePreview = () => ;
export const CodeSnippetBasicExamplePreview = () => ;
## Overview
The CodeSnippet component displays code with syntax highlighting and copy functionality.
## Basic Usage
```tsx theme={null}
import { CodeSnippet } from '@peppermint-design/devreadykit-custom';
export default function App() {
const code = `function hello() {
console.log("Hello, World!");
}`;
return (
);
}
```
## Different Languages
### JavaScript
```tsx theme={null}
```
### Python
```tsx theme={null}
```
### CSS
```tsx theme={null}
```
## With Line Numbers
```tsx theme={null}
```
## Props
| Prop | Type | Default | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------- |
| tabs | `Array<{ id: string; label: string; code: string; language?: string; codeByPm?: Record }>` | - | Snippet panes to render |
| defaultTabId | `string` | first tab | Tab selected on load |
| collapsible | `boolean` | `true` | Enable collapse behaviour for long snippets |
| initiallyCollapsed | `boolean` | `false` | Whether the snippet starts collapsed |
| previewLines | `number` | `12` | Lines shown when collapsed |
| maxExpandedLines | `number` | `24` | Maximum lines when expanded |
| showToggle | `boolean` | `true` | Display the show more/less toggle |
| copyButtonLabel | `string` | `"Copy"` | Custom label for the copy button |
| pmTabs | `Array<{ id: string; label: string }>` | - | Optional package manager tab switcher |
| defaultPmId | `string` | first pm tab | Default package manager tab |
| className | `string` | - | Additional CSS classes |
## Examples
### API Response
```tsx theme={null}
function ApiResponse({ data }) {
const jsonCode = JSON.stringify(data, null, 2);
return (
);
}
```
### Installation Instructions
```tsx theme={null}
function InstallationCode() {
const installCode = `npm install @peppermint-design/devreadykit-custom
# or with yarn
yarn add @peppermint-design/devreadykit-custom
# or with pnpm
pnpm add @peppermint-design/devreadykit-custom`;
return (
);
}
```
### React Component Example
```tsx theme={null}
function ComponentExample() {
const reactCode = `import { Button } from '@peppermint-design/devreadykit-custom';
export default function MyComponent() {
return (
);
}`;
return (
);
}
```