CodeBlock

CodeBlock displays source code with syntax highlighting and optional copy controls.

npm install @plocks/code

Examples

Properties

Playground

Basics

Default CodeBlock showing a single snippet with automatic language detection and copy controls.

Loading demo…

import { Block } from '@plocks/ui';
import { CodeBlock } from '@plocks/code';

const sample = `import { View, Text } from 'react-native';

export function HelloWorld() {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
}`;

export function Demo() {
  return (
    <Block fullWidth>
      <CodeBlock>{sample}</CodeBlock>
    </Block>
  );
}

Interactive

Pass onCopy to run your own feedback after the copy button copies the code.

Loading demo…

import { useState } from 'react';

import { Block, Text } from '@plocks/ui';
import { CodeBlock } from '@plocks/code';

const sampleCode = `const greeting = "Hello, World!";
console.log(greeting);

// A simple function
function add(a, b) {
  return a + b;
}

const result = add(5, 3);
console.log(\`5 + 3 = \${result}\`);`;

export function Demo() {
  const [copiedLength, setCopiedLength] = useState<number | null>(null);

  return (
    <Block fullWidth>
      <CodeBlock
        language="javascript"
        title="Interactive copy example"
        onCopy={(code) => setCopiedLength(code.length)}
      >
        {sampleCode}
      </CodeBlock>
      {copiedLength !== null && (
        <Text size="xs" c="success">
          Copied {copiedLength} characters to the clipboard.
        </Text>
      )}
    </Block>
  );
}

File tabs

Pass files to show one source per tab. Each tab carries its language's logo where one exists (TypeScript, CSS) and a glyph otherwise, and highlighting follows the active file's language — data.ts highlights as TypeScript even though the block's language is tsx.

Loading demo…

import { Block } from '@plocks/ui';
import { CodeBlock } from '@plocks/code';

const FILES = [
  {
    name: 'index.tsx',
    code: `import { Blockquote } from '@plocks/ui';

import { AUTHOR, QUOTE } from './data';

export function Demo() {
  return <Blockquote author={AUTHOR}>{QUOTE}</Blockquote>;
}`,
  },
  {
    name: 'data.ts',
    code: `export const AUTHOR = {
  name: 'Priya Shah',
  title: 'CTO',
  organization: 'Northwind Labs',
};

export const QUOTE = 'The components feel native on every platform.';`,
  },
  {
    name: 'quote.css',
    code: `.quote {
  border-left: 4px solid var(--primary-5);
  padding: 16px 20px;
}`,
  },
  {
    name: 'theme.json',
    code: `{
  "primaryColor": "blue",
  "defaultRadius": "md"
}`,
  },
];

export function Demo() {
  return (
    <Block fullWidth>
      <CodeBlock files={FILES} />
    </Block>
  );
}

GitHub

Surface GitHub shortcuts alongside copy controls across variants using the githubUrl prop.

Loading demo…

import { Block, Text } from '@plocks/ui';
import { CodeBlock } from '@plocks/code';

const componentExample = `import { View, Text } from 'react-native';

export function HelloWorld() {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
}`;

const inlineExample = `// This code has both copy and GitHub buttons
export function MyComponent() {
  return <div>Hello with GitHub button!</div>;
}`;

const terminalExample = `$ npm install @plocks/ui
$ npm start
Server running on http://localhost:3000`;

const floatingExample = `// Floating buttons example (no title)
export function FloatingExample() {
  return <span>Hover to see buttons</span>;
}`;

export function Demo() {
  return (
    <Block fullWidth>
      <Block>
        <Text size="sm" fw="semibold">
          Basic component
        </Text>
        <CodeBlock
          title="Basic component"
          githubUrl="https://github.com/platform-blocks/plocks/blob/main/packages/ui/src/components/Button/Button.tsx"
        >
          {componentExample}
        </CodeBlock>
      </Block>

      <Block>
        <Text size="sm" fw="semibold">
          File name and language
        </Text>
        <CodeBlock
          files={[{ name: 'example.tsx' }]}
          githubUrl="https://github.com/platform-blocks/plocks/blob/main/packages/ui/src/components/Text/Text.tsx"
        >
          {inlineExample}
        </CodeBlock>
      </Block>

      <Block>
        <Text size="sm" fw="semibold">
          Terminal variant
        </Text>
        <CodeBlock
          variant="terminal"
          title="Terminal example"
          githubUrl="https://github.com/platform-blocks/plocks/blob/main/apps/docs/eas-build-post-install.sh"
        >
          {terminalExample}
        </CodeBlock>
      </Block>

      <Block>
        <Text size="sm" fw="semibold">
          Floating controls
        </Text>
        <CodeBlock githubUrl="https://github.com/platform-blocks/plocks/blob/main/packages/code/src/components/CodeBlock/CodeBlock.tsx">
          {floatingExample}
        </CodeBlock>
      </Block>
    </Block>
  );
}

Languages

Examples highlighting TypeScript, JSON, and Markdown syntax rendering in CodeBlock.

Loading demo…

import { Block } from '@plocks/ui';
import { CodeBlock } from '@plocks/code';

const tsxExample = `interface Props {
  title: string;
  onPress?: () => void;
}

export function Button({ title, onPress }: Props) {
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}`;

const jsonExample = `{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.72.0"
  },
  "scripts": {
    "start": "expo start",
    "build": "expo build"
  }
}`;

const markdownExample = `# Getting Started

This is a **markdown** example with \`inline code\`.

## Features

- Syntax highlighting
- Multiple languages
- Copy functionality

> Blockquote with *emphasis* and **bold** text.`;

export function Demo() {
  return (
    <Block fullWidth>
      <CodeBlock language="tsx" title="React component">
        {tsxExample}
      </CodeBlock>
      <CodeBlock language="json" title="Package configuration">
        {jsonExample}
      </CodeBlock>
      <CodeBlock language="markdown" title="Documentation">
        {markdownExample}
      </CodeBlock>
    </Block>
  );
}

Features

Add a title and showLineNumbers for a labeled, numbered block, or set showCopyButton={false} to hide the copy button.

Loading demo…

import { Block } from '@plocks/ui';
import { CodeBlock } from '@plocks/code';

const fibonacciExample = `function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Calculate the 10th Fibonacci number
const result = fibonacci(10);
console.log(\`Fibonacci(10) = \${result}\`);`;

const disabledCopyExample = `// This example has the copy button disabled
const message = "Hello, World!";
console.log(message);`;

export function Demo() {
  return (
    <Block fullWidth>
      <CodeBlock title="With title and line numbers" showLineNumbers>
        {fibonacciExample}
      </CodeBlock>
      <CodeBlock title="No copy button" showCopyButton={false}>
        {disabledCopyExample}
      </CodeBlock>
    </Block>
  );
}

Variants

Compare the default, terminal, and hacker themes available through the variant prop.

Loading demo…

import { Block, Text } from '@plocks/ui';
import { CodeBlock } from '@plocks/code';

const sampleCode = `function hackTheMatrix() {
  const matrix = generateMatrix();
  console.log('Entering the matrix...');

  for (let i = 0; i < matrix.length; i += 1) {
    matrix[i].decrypt();
  }

  return 'Welcome to the real world.';
}`;

const terminalCode = `$ npm install @plocks/ui
$ cd my-app
$ npm start
Server running on port 3000`;

export function Demo() {
  return (
    <Block fullWidth>
      <Block>
        <Text size="sm" fw="semibold">
          Default code block
        </Text>
        <CodeBlock language="javascript" title="matrix.js">
          {sampleCode}
        </CodeBlock>
      </Block>

      <Block>
        <Text size="sm" fw="semibold">
          Terminal variant
        </Text>
        <CodeBlock variant="terminal" title="Terminal">
          {terminalCode}
        </CodeBlock>
      </Block>

      <Block>
        <Text size="sm" fw="semibold">
          Hacker variant
        </Text>
        <CodeBlock variant="hacker" language="javascript" title="hack.exe">
          {sampleCode}
        </CodeBlock>
      </Block>
    </Block>
  );
}

Highlighting

Use highlightLines for single lines or ranges to draw attention to important snippets.

Loading demo…

import { Block } from '@plocks/ui';
import { CodeBlock } from '@plocks/code';

const sample = `import { View, Text } from 'react-native';

interface User {
  id: number;
  name: string; // highlighted
  active: boolean;
}

export function UserCard({ user }: { user: User }) {
  if (!user.active) {
    return null; // early return highlighted
  }
  return (
    <View style={{ padding: 8 }}>
      <Text>{user.name}</Text>
    </View>
  );
}

// Utility function (range highlighted)
export function filterActive(users: User[]) {
  return users.filter((u) => u.active);
}`;

export function Demo() {
  return (
    <Block fullWidth>
      <CodeBlock title="Highlighted lines" showLineNumbers highlightLines={['5', '11', '20-23']}>
        {sample}
      </CodeBlock>
    </Block>
  );
}

Scan to open this page on your phoneplocks.dev/code/CodeBlock

React Native design for iOS, Android, and Web.

Quick Links

Components Charts Hooks Add-ons & extensions

Docs

Getting Started Examples Localization Accessibility

Agents

llms.txt Skills Sitemap

Resources

FAQ Changelog Contributing