Enterprise UI Kit

Code Pad

Reusable code block for documentation and examples. Optional language label, title, and copy-to-clipboard.

Basic (copy only)

npm install
npm run dev

With language label

json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true
}

With title and language (e.g. usage example)

Button usagetsx

import { Button } from "@/app/components/ui";

export function MyComponent() {
  return (
    <Button variant="primary" onClick={() => alert("Hi")}>
      Click me
    </Button>
  );
}

No copy button

const x = 1;

How to use

CodePad props: code, language?, title?, showCopy? (default true), className?. Copy the examples below.

1. Import

tsx

import { CodePad } from "@/app/components/ui";

2. Basic (code only)

tsx

<CodePad code={codeString} />

3. With language

Language variantstsx

<CodePad code={codeString} language="tsx" />
<CodePad code={codeString} language="json" />
<CodePad code={codeString} language="bash" />
<CodePad code={codeString} language="js" />
<CodePad code={codeString} language="css" />
<CodePad code={codeString} language="html" />

4. With title and language

tsx

<CodePad code={codeString} title="Button usage" language="tsx" />
<CodePad code={codeString} title="config.json" language="json" />

5. showCopy true / false

tsx

<CodePad code={codeString} showCopy />
<CodePad code={codeString} showCopy={false} language="js" />

6. With className

tsx

<CodePad code={codeString} language="tsx" className="max-w-xl" />

7. All props

tsx

<CodePad
  code={codeString}
  language="tsx"
  title="Example.tsx"
  showCopy={true}
  className="max-w-2xl"
/>