Code Block

Composable code-block primitives with copy actions, tabs, package-manager commands, and syntax highlighting.

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "js",
    filename: "MyComponent.jsx",
    code: `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
  {
    language: "tsx",
    filename: "MyComponent.tsx",
    code: `function MyComponent(props: { name: string }) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} />

export default Example

Installation

npx love-ui@latest add code-block

Usage

Core primitives

import {
  CodeBlock,
  CodeBlockHeader,
  CodeBlockContent,
  CodeBlockGroup,
  CodeBlockIcon,
  CodeblockShiki,
  CopyButton,
} from "@loveui/code-blocks"

const code = `export function sum(a: number, b: number) {
  return a + b
}`
 
<CodeBlock>
  <CodeBlockHeader>
    <CodeBlockGroup>
      <CodeBlockIcon language="ts" />
      <span>math.ts</span>
    </CodeBlockGroup>
    <CopyButton content={code} />
  </CodeBlockHeader>
  <CodeBlockContent>
    <CodeblockShiki code={code} language="ts" lineNumbers />
  </CodeBlockContent>
</CodeBlock>

Highlighting engines

import { CodeblockShiki, CodeBlockSugarHigh } from "@loveui/code-blocks"

Package manager command blocks

import { CodeBlockSelectPkg, CodeBlockTabsPkg } from "@loveui/code-blocks"

<CodeBlockSelectPkg command="@loveui/code-blocks" title="Install package" type="install" />
<CodeBlockTabsPkg command="@loveui/code-blocks" type="install" />

MDX pre wrappers

import { PreShikiComponent, PreSugarHighComponent } from "@loveui/code-blocks"

const mdxComponents = {
  ...PreShikiComponent,
}

Exports

CodeBlock, CodeBlockHeader, CodeBlockContent, CodeBlockGroup, CodeBlockIcon
CopyButton
CodeblockShiki, CodeBlockSugarHigh
InlineCode, MultiTabs
CodeBlockSelectPkg, CodeBlockTabsPkg, SelectPackageManager
PreShikiComponent, PreSugarHighComponent
Tabs, TabsList, TabsTrigger, TabsContent
DropdownMenu primitives
usePackageManager, copyToClipboard, reactToText, highlight, sugarHighHighlight

Examples

Default

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "js",
    filename: "MyComponent.jsx",
    code: `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
  {
    language: "tsx",
    filename: "MyComponent.tsx",
    code: `function MyComponent(props: { name: string }) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} />

export default Example

Headless

export async function getUser(id: string) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error("Failed to load user");
  return response.json();
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "tsx",
    filename: "api-client.ts",
    code: `export async function getUser(id: string) {
  const response = await fetch(\`/api/users/\${id}\`);
  if (!response.ok) throw new Error("Failed to load user");
  return response.json();
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} hideHeader />

export default Example

Highlighted lines

export function getDiscountedPrice(price: number, percent: number) {
  const discount = price * (percent / 100); // highlighted line
  const total = price - discount;
  return Math.max(total, 0);
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "tsx",
    filename: "pricing.ts",
    code: `export function getDiscountedPrice(price: number, percent: number) {
  const discount = price * (percent / 100); // highlighted line
  const total = price - discount;
  return Math.max(total, 0);
}`,
  },
  {
    language: "js",
    filename: "pricing.js",
    code: `export function getDiscountedPrice(price, percent) {
  const discount = price * (percent / 100); // highlighted line
  const total = price - discount;
  return Math.max(total, 0);
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} lineNumbers />

export default Example

Highlighted words

type User = { firstName: string; lastName: string };

export function formatUser(user: User) {
  return `${user.firstName} ${user.lastName}`;
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "tsx",
    filename: "format-user.tsx",
    code: `type User = { firstName: string; lastName: string };

export function formatUser(user: User) {
  return \`\${user.firstName} \${user.lastName}\`;
}`,
  },
  {
    language: "ts",
    filename: "format-user.ts",
    code: `type User = { firstName: string; lastName: string };

export function formatUser(user: User) {
  return [user.firstName, user.lastName].join(" ");
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} lineNumbers />

export default Example

Diff

function calculateTotal(items: Array<{ price: number; quantity: number }>) {
- let total = 0;
+ let subtotal = 0;

  for (const item of items) {
-   total += item.price * item.quantity;
+   subtotal += item.price * item.quantity;
  }

- return total;
+ return subtotal;
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "ts",
    filename: "utils.ts",
    code: `function calculateTotal(items: Array<{ price: number; quantity: number }>) {
- let total = 0;
+ let subtotal = 0;

  for (const item of items) {
-   total += item.price * item.quantity;
+   subtotal += item.price * item.quantity;
  }

- return total;
+ return subtotal;
}`,
  },
  {
    language: "js",
    filename: "utils.js",
    code: `function calculateTotal(items) {
- let total = 0;
+ let subtotal = 0;

  for (const item of items) {
-   total += item.price * item.quantity;
+   subtotal += item.price * item.quantity;
  }

- return total;
+ return subtotal;
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} lineNumbers />

export default Example

Focus

export function calculateDiscount(price: number, percentage: number) {
  const discount = price * (percentage / 100);
  const finalPrice = price - discount; // focus line
  return Number(finalPrice.toFixed(2));
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "ts",
    filename: "discount.ts",
    code: `export function calculateDiscount(price: number, percentage: number) {
  const discount = price * (percentage / 100);
  const finalPrice = price - discount; // focus line
  return Number(finalPrice.toFixed(2));
}`,
  },
  {
    language: "js",
    filename: "discount.js",
    code: `export function calculateDiscount(price, percentage) {
  const discount = price * (percentage / 100);
  const finalPrice = price - discount; // focus line
  return Number(finalPrice.toFixed(2));
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} lineNumbers />

export default Example

Hidden line numbers

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "js",
    filename: "MyComponent.jsx",
    code: `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
  {
    language: "tsx",
    filename: "MyComponent.tsx",
    code: `function MyComponent(props: { name: string }) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} lineNumbers={false} />

export default Example

No syntax highlighting

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "js",
    filename: "MyComponent.jsx",
    code: `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
  {
    language: "tsx",
    filename: "MyComponent.tsx",
    code: `function MyComponent(props: { name: string }) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
]

const Example = () => <CodeBlockShowcase files={code} highlighter="plain" />

export default Example

Sugar High theme

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

"use client"

import { CodeBlockShowcase, type CodeSample } from "./code-block-shared"

const code: CodeSample[] = [
  {
    language: "js",
    filename: "MyComponent.jsx",
    code: `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
  {
    language: "tsx",
    filename: "MyComponent.tsx",
    code: `function MyComponent(props: { name: string }) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`,
  },
]

const Example = () => (
  <CodeBlockShowcase files={code} highlighter="sugar-high" lineNumbers />
)

export default Example

Combobox Dialog