Code Snippet
Dark-background code block with syntax highlighting, copy button, and optional tab switcher for multiple files.
import
{ CodeSnippet } from "@pepulux/ui"Horizontal (single)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
npm install @pepulux/ui
Vertical
// button.tsx
export function Button({ children, variant = "solid" }) {
return (
<button className={cn("btn", variant)}>
{children}
</button>
);
}With tabs
npm install @pepulux/ui
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "horizontal" | "vertical" | "vertical-with-tabs" | "vertical" | Layout variant |
| code | string | — | Code string for single-file variants |
| language | string | "tsx" | Syntax highlight language hint |
| tabs | CodeSnippetTab[] | — | Array of { label, code, language } for tabbed variant |