Bloque de código — logic2b/ui

bash

npx logic2b@next add code-block

import { CodeBlock } from "@/components/ui/code-block"

export default function CodeBlockDemo() {
  return (
    <CodeBlock
      language="bash"
      code={`npx logic2b@next add code-block`}
      className="w-full max-w-md"
    />
  )
}

Instalación

npx logic2b@next add code-block

¿Trabajas con un asistente de IA? Copia este prompt en Claude Code, Cursor o Copilot: incluye los pasos de instalación, una alternativa sin CLI y una lista de verificación.

Add the "code-block" item from the logic2b ui registry (https://ui.logic2b.com) to this project. Follow every step and verify at the end.

## Steps

1. If the project has no `components.json` yet, set up logic2b ui first:

   ```bash
   npx logic2b@next init
   ```

2. Install the item (the CLI resolves registry dependencies automatically):

   ```bash
   npx logic2b@next add code-block
   ```

3. Install any npm dependencies the command prints.

## If the CLI is not available

Do it manually from the registry payload:

1. Fetch https://ui.logic2b.com/r/code-block.json.
2. Write every entry in `files[]` to its mapped project path (see below).
3. Repeat (recursively) for each name in `registryDependencies`.
4. Install every package listed in `dependencies` across those payloads.

## Registry reference

- Index of every item: https://ui.logic2b.com/r/index.json
- Item payload (full source): https://ui.logic2b.com/r/<name>.json
- Usage examples per item: https://ui.logic2b.com/r/demos/index.json → https://ui.logic2b.com/r/demos/<demo>.json
- Docs index for agents: https://ui.logic2b.com/llms.txt (full docs: https://ui.logic2b.com/llms-full.txt)
- Every docs page is Markdown when you append `.md` to its URL.

Registry file paths map to project paths like this:
- `ui/*` → `@/components/ui/*`
- `blocks/<name>/*` → `@/components/*`
- `charts/*` → `@/components/charts/*`
- `hooks/*` → `@/hooks/*`
- `lib/utils.ts` → `@/lib/utils.ts`
- `theme.css` → next to the project's Tailwind entry stylesheet

## Conventions (do not break these)

- Tailwind CSS v4 (CSS-first config; no tailwind.config.js needed) and React 19.
- All colors go through semantic tokens (`bg-primary`, `text-muted-foreground`,
  `border-border`, …). Never hardcode hex/oklch values in components.
- Dark mode is class-based: toggle `.dark` on `<html>`.
- Icons come from lucide-react.

## Verify before finishing

1. The dev server starts and the app renders without console errors.
2. TypeScript compiles (`tsc --noEmit` or the framework's check).
3. Components use the theme: a `<Button>` shows the primary token color,
   and toggling `.dark` on `<html>` switches the palette.

Instala las dependencias:

npm install lucide-react

Copia el contenido en ui/code-block.tsx:

"use client"

import * as React from "react"
import { CheckIcon, CopyIcon } from "lucide-react"

import { cn } from "@/lib/utils"

export interface CodeBlockProps
  extends Omit<React.ComponentProps<"div">, "children"> {
  /** The code to render and copy. */
  code: string
  /** Optional language label shown in the header (display only — no highlighting). */
  language?: string
}

/**
 * A styled code container with a one-click copy button. Dependency-free (no
 * syntax highlighter): renders the code verbatim in a `<pre>` and copies it via
 * the Clipboard API, with a copied-state affordance.
 */
function CodeBlock({ className, code, language, ...props }: CodeBlockProps) {
  const [copied, setCopied] = React.useState(false)
  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(
    undefined
  )

  React.useEffect(() => () => clearTimeout(timer.current), [])

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(code)
      setCopied(true)
      clearTimeout(timer.current)
      timer.current = setTimeout(() => setCopied(false), 2000)
    } catch {
      // Clipboard unavailable (insecure context / denied) — no-op.
    }
  }

  const CopyButton = (
    <button
      type="button"
      onClick={copy}
      aria-label={copied ? "Copied" : "Copy code"}
      className={cn(
        "text-muted-foreground hover:bg-accent hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors outline-none",
        "focus-visible:ring-ring/50 focus-visible:ring-[3px]"
      )}
    >
      {copied ? (
        <CheckIcon className="size-3.5" />
      ) : (
        <CopyIcon className="size-3.5" />
      )}
    </button>
  )

  return (
    <div
      data-slot="code-block"
      className={cn(
        "bg-muted/40 relative overflow-hidden rounded-lg border",
        className
      )}
      {...props}
    >
      {language ? (
        <div className="flex items-center justify-between border-b px-3 py-1.5">
          <span className="text-muted-foreground font-mono text-xs">
            {language}
          </span>
          {CopyButton}
        </div>
      ) : (
        <div className="absolute top-1.5 right-1.5 z-10">{CopyButton}</div>
      )}
      <pre
        className={cn(
          "overflow-x-auto p-4 text-sm leading-relaxed",
          !language && "pr-11"
        )}
      >
        <code className="font-mono">{code}</code>
      </pre>
    </div>
  )
}

export { CodeBlock }

Uso

import { CodeBlock } from "@/components/ui/code-block"

<CodeBlock language="tsx" code={`const respuesta = 42`} />

El botón de copia escribe code en el portapapeles y muestra una marca de confirmación durante dos segundos. Omite language para generar un bloque sencillo con un botón de copia flotante en la esquina.

Resaltado

CodeBlock no incluye dependencias ni un resaltador de sintaxis de forma deliberada. Para añadir resaltado, genera la salida de tu herramienta dentro de <pre> —por ejemplo, pasa HTML de Shiki o Prism— o envuelve el componente. Mantener la base sin resaltador hace que sea pequeña e independiente del framework.

Playground interactivo

Edita las propiedades del componente y revisa el JSX exacto antes de copiarlo. La vista previa se carga solo cuando esta sección entra en pantalla.

JSX generado

<CodeBlock
  code="const ready = true\nconsole.log(ready)"
  language="ts"
 />

Referencia de API

Generada a partir de las exportaciones públicas de TypeScript en src/ui/code-block.tsx. Las descripciones técnicas conservan el texto canónico del código fuente.

Ver JSON

CodeBlockProps

Tipo

interface CodeBlockProps extends Omit<React.ComponentProps<"div">, "children"> { /** The code to render and copy. */ code: string /** Optional language label shown in the header (display only — no highlighting). */ language?: string }

CodeBlock

Componente

A styled code container with a one-click copy button. Dependency-free (no syntax highlighter): renders the code verbatim in a `<pre>` and copies it via the Clipboard API, with a copied-state affordance.

Props: CodeBlockProps

Propiedad	Tipo	Obligatoria	Valor predeterminado	Descripción
`code`	`string`	Sí	—	The code to render and copy.
`language`	`string`	No	—	Optional language label shown in the header (display only — no highlighting).

Contrato de accesibilidad

Comportamiento legible por máquinas y responsabilidades de quien integra code-block. Los detalles normativos conservan el texto canónico del registro.

Ver JSON

Soporte: Semántica nativa
Patrón: code region with copy action; HTML pre/code/button

Interacciones de teclado para code-block
Teclas	Comportamiento
`Enter` `Space`	Activate the focused control.

Semántica incorporada

Code uses pre/code semantics and the copy button updates its accessible label after success.

Responsabilidades de integración

Provide a language label when it helps comprehension and surface copy failures in application context if critical.