CodeBlock
Syntax-highlighted codeblock component built on top of react-syntax-highlighter.
scrollx-uisrchome.tsx
src/home.tsx
1import React, { useState } from 'react';
2import { NextPage } from 'next';
3import Header from '../components/Header';
4
5const Home: NextPage = () => {
6 const [theme, setTheme] = useState('dark');
7
8 return (
9 <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
10 <Header />
11 <main className="container mx-auto px-4 py-12">
12 <section className="text-center">
13 <h1 className="text-5xl font-bold text-gray-800 dark:text-white">
14 ScrollX UI
15 </h1>
16 </section>
17 </main>
18 </div>
19 );
20};
21
22export default Home;TSX
UTF-8
Installation
npx shadcn@latest add https://scrollx-ui.vercel.app/registry/codeblock.json Usage
import { CodeBlock } from "@/components/ui/codeblock";<CodeBlock
language="typescript"
filename="main.tsx"
tabs={[
{ name: 'api.ts', code: "fetchData()" },
{ name: 'styles.css', code: ".card { padding: 1rem }", language: 'css' }
]}
breadcrumb={['src', 'components']}
/>Examples
CodeBlock with Light theme
scriptsdeploy.sh
deploy.sh
1#!/bin/bash
2echo "Starting deployment..."
3npm run build
4npm run test
5
6if [ $? -eq 0 ]; then
7 echo "Tests passed, deploying..."
8 npm run deploy
9 echo "Deployment complete!"
10else
11 echo "Tests failed, aborting deployment"
12 exit 1
13fiBASH
UTF-8
CodeBlock with Multitabs
scrollx-ui
1import React, { useState } from 'react';
2import { NextPage } from 'next';
3import Header from '../components/Header';
4
5const Home: NextPage = () => {
6 const [theme, setTheme] = useState('dark');
7
8 return (
9 <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
10 <Header />
11 <main className="container mx-auto px-4 py-12">
12 <section className="text-center">
13 <h1 className="text-5xl font-bold text-gray-800 dark:text-white">
14 ScrollX UI
15 </h1>
16 </section>
17 </main>
18 </div>
19 );
20};
21
22export default Home;TSX
UTF-8
API Reference
CodeBlock
Syntax-highlighted code block with tabs, stats, and file navigation.