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 https://ui.aceternity.com/registry/code-block.jsonProps
| 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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu is an artist, I didn't know what I wanted when we started, but his
intuition and eye for design more than made up for it. We went from "I
want something dark theme and high...
John Ferry
President at TAC, CEO at Rogue