FreeDeveloper UI

Code Block

Use this component in documentation pages, developer tools, template marketplaces, and onboarding flows where users need to read or copy code quickly.

ReactTailwind CSSCodeCopy

<div className="rounded-lg border p-4">
  <h2 className="text-xl font-bold">Flights Counter</h2>
  <p className="mb-2">Flight Club fights count: {count}</p>
  <button className="rounded bg-blue-500 px-4 py-2 text-white">
    Increment
  </button>
</div>

Overview

A configurable code block with file tabs, copy action, and compact dark presentation.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<CodeBlock />

Code Block.tsx

tsx

"use client";

import { useState } from "react";

const samples = {
  tsx: '<div className="rounded-lg border p-4">\\n  <h2 className="text-xl font-bold">Flights Counter</h2>\\n  <p className="mb-2">Flight Club fights count: {count}</p>\\n  <button className="rounded bg-blue-500 px-4 py-2 text-white">\\n    Increment\\n  </button>\\n</div>',
  css: '.card {\\n  border-radius: 0.75rem;\\n  border: 1px solid rgba(255, 255, 255, 0.1);\\n  background: #020617;\\n}',
};

export function CodeBlock() {
  const [active, setActive] = useState("tsx");
  const [copied, setCopied] = useState(false);

  async function copyCode() {
    await navigator.clipboard.writeText(samples[active]);
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1200);
  }

  return (
    <div className="w-full overflow-hidden rounded-xl border border-white/10 bg-zinc-950 text-white">
      <div className="flex items-center justify-between border-b border-white/10 bg-black px-3 py-2">
        <div className="flex gap-1">
          {["tsx", "css"].map((tab) => (
            <button
              key={tab}
              type="button"
              onClick={() => setActive(tab)}
              className={"rounded-md px-2 py-1 text-xs " + (active === tab ? "bg-lime-300 text-zinc-950" : "text-zinc-400")}
            >
              Component.{tab}
            </button>
          ))}
        </div>
        <button
          type="button"
          onClick={copyCode}
          className="rounded-md border border-white/10 px-2 py-1 text-xs text-zinc-400"
        >
          {copied ? "Copied" : "Copy"}
        </button>
      </div>
      <pre className="max-h-80 overflow-auto p-4 text-xs leading-relaxed text-zinc-400">
        <code>{samples[active]}</code>
      </pre>
    </div>
  );
}