Code Block

Renders a code block with syntax highlighting. It tokenizes code based on language rules and displays it with optional line numbers, copy button, and typing animation. Use it to display source code in a readable, styled format.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/code-block

npx layro-cli add @educlopez/code-block

npx layro-cli add @educlopez/code-block

bunx layro-cli add @educlopez/code-block

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { Check, Copy } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

export type CodeBlockLanguage =
  | "bash"
  | "css"
  | "js"
  | "json"
  | "jsx"