All components
General
stable

Code Block

Use Code Block by copying the source file or importing it into your UI layer.

Preview
code-block
tsx
const preview = "live";

Import

tsx
import { CodeBlock } from "@/components/ui/code-block";
bash
npx sui add code-block

Source

From components/ui/code-block.tsx

tsx
import React from "react";
import { Snippet } from "./snippet";

interface CodeBlockProps {
  code: string;
  language?: string;
  filename?: string;
}

// CodeBlock is a thin wrapper around Snippet for backward compatibility
export const CodeBlock = ({ code, language = "tsx", filename }: CodeBlockProps) => {
  return <Snippet code={code} language={language} filename={filename} />;
};