Code Block

A configurable code block component built on top of react-syntax-highlighter.

DummyComponent.jsx

const DummyComponent = () => {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(prev => prev + 1);
  };

  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold mb-4">Fights Counter</h2>
      <p className="mb-2">Fight Club Fights Count: {count}</p>
      <button 
        onClick={handleClick}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Increment
      </button>
    </div>
  );
};

Installation

Run the following command

npx shadcn@latest add @aceternity/code-block

Props

Prop	Type	Required	Description
`language`	`string`	Yes	The programming language for syntax highlighting
`filename`	`string`	Yes	The name of the file to display
`highlightLines`	`number[]`	No	Array of line numbers to highlight. Defaults to []
`code`	`string`	Conditional	The code content to display
`tabs`	`Array<TabConfig>`	Conditional	Array of tab configurations

Note: Either code OR tabs must be provided, but not both.

TabConfig Object Structure

Property	Type	Required	Description
`name`	`string`	Yes	The name of the tab
`code`	`string`	Yes	The code content for this tab
`language`	`string`	No	Override the default language for this tab
`highlightLines`	`number[]`	No	Override the default highlighted lines for this tab

Code Preview With Multiple Tabs

<div className="p-4 border rounded-lg">
  <h2 className="text-xl font-bold mb-4">Fights Counter</h2>
  <p className="mb-2">Fight Club Fights Count: {count}</p>
  <button 
    onClick={handleClick}
    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
  >
    Increment
  </button>
</div>

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access