Browse all components

Code Block

A code block with a language label and one-click copy button.

From AICSS ↗React, Vue & Svelte

Preview

TypeScript

1const answer = await agent.run("Find the best source");
2console.log(answer);

Install

Choose your framework below and copy the source into your project. For React, place the component and its CSS Module in the same folder, then import the component where you need it.

Code

Open source ↗

CodeBlock.tsx

"use client";

import styles from "./CodeBlock.module.css";
import { useState } from "react";

export function CodeBlock({ lang, code }: { lang: string; code: string }) {
  const [copied, setCopied] = useState(false);
  const lines = code.split("\n");
  const copy = () => {
    navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };
  return (
    <div className={styles.cb}>
      <div className={styles.cbHead}>
        <span className={styles.cbFile}>
          <svg className={styles.cbIcon} viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="m8 6-6 6 6 6M16 6l6 6-6 6" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          <span className={styles.cbLang}>{lang}</span>
        </span>
        <button className={styles.cbCopy} onClick={copy} aria-label={copied ? "Copied" : "Copy code"}>
          {copied ? (
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m4.5 12.75 6 6 9-13.5" /></svg>
          ) : (
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2.5" /><path d="M5 15a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2" /></svg>
          )}
          <span>{copied ? "Copied" : "Copy"}</span>
        </button>
      </div>
      <div className={styles.cbBody}>
        <div className={styles.cbLines}>
          {lines.map((line, i) => (
            <div className={styles.cbRow} key={i}>
              <span className={styles.cbLn}>{i + 1}</span>
              <code className={styles.cbCode}>{line || "\u00A0"}</code>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Copy both the component and its CSS Module into the same folder.

Related components

Comparison Table ↗

A feature-by-plan comparison matrix with checkmarks.

Data Table ↗

A tidy data table for structured comparisons and results.

Message Actions ↗

The action row under an assistant message: good response, bad response, copy, an emoji reaction, reply, and more.

Streaming Text ↗

Typewriter-style streaming text with a blinking caret.

Text Response ↗

Clean prose styling for a standard assistant answer with inline code.