Code Block
A configurable code block component built on top of react-syntax-highlighter.
DummyComponent.jsx
1const DummyComponent = () => {
2 const [count, setCount] = React.useState(0);
3
4 const handleClick = () => {
5 setCount(prev => prev + 1);
6 };
7
8 return (
9 <div className="p-4 border rounded-lg">
10 <h2 className="text-xl font-bold mb-4">Fights Counter</h2>
11 <p className="mb-2">Fight Club Fights Count: {count}</p>
12 <button
13 onClick={handleClick}
14 className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
15 >
16 Increment
17 </button>
18 </div>
19 );
20};
21Installation
Run the following command
npx shadcn@latest add @aceternity/code-blockProps
| 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
1<div className="p-4 border rounded-lg">
2 <h2 className="text-xl font-bold mb-4">Fights Counter</h2>
3 <p className="mb-2">Fight Club Fights Count: {count}</p>
4 <button
5 onClick={handleClick}
6 className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
7 >
8 Increment
9 </button>
10</div>
11Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
